/* ===========================================================
FISHMARKET.AI — DESIGN SYSTEM
Deep-sea navy + electric cyan/blue + glass, AI-command-center feel
=========================================================== */
/* Font loading moved to a tag in index.html — an @import here
used to force the browser to fully fetch+parse this whole file before it
could even discover the fonts request, adding a full extra round trip
before any real text could render on slow connections. */
:root{
--navy-abyss: #04070d;
--navy-deep: #060d1c;
--navy-mid: #0a1730;
--navy-panel: rgba(15, 28, 54, 0.55);
--navy-panel-solid: #0d1a34;
--line: rgba(120, 170, 220, 0.14);
--line-bright: rgba(41, 231, 255, 0.35);
--cyan: #29e7ff;
--cyan-soft: #7fe7ff;
--blue: #3b6ef6;
--blue-deep: #1e3a8a;
--gold: #d8b877;
--text-hi: #eaf3ff;
--text-mid: #a9bcda;
--text-low: #6d80a0;
--radius-lg: 22px;
--radius-md: 14px;
--radius-sm: 8px;
--ease: cubic-bezier(.19,1,.22,1);
}
/* 2026-08-25 owner-approved mobile B2B home: exact premium card flow. */
.b2b-label-mobile{
display:none;
}
.b2b-sparkle-cta .fa-arrow-right-long{
margin-left:6px;
}
@media (max-width:767px){
body.b2b-dashboard-page{
background:#f6f8fb !important;
}
body.b2b-dashboard-page .b2b-app-shell{
padding-top:calc(var(--b2b-topbar-h) + 8px) !important;
}
body.b2b-dashboard-page .b2b-sidebar{
background:linear-gradient(135deg,#061b33 0%,#082544 58%,#031426 100%) !important;
border-bottom:1px solid rgba(255,255,255,.08) !important;
box-shadow:0 14px 34px rgba(2,10,25,.24) !important;
}
body.b2b-dashboard-page .b2b-dash-brand b,
body.b2b-dashboard-page .b2b-dash-brand small{
color:#fff !important;
text-shadow:none !important;
}
body.b2b-dashboard-page .b2b-dash-brand small{
color:rgba(218,235,255,.76) !important;
}
body.b2b-dashboard-page .b2b-topbar{
background:linear-gradient(135deg,#061b33 0%,#082744 100%) !important;
border-bottom:1px solid rgba(255,255,255,.08) !important;
box-shadow:0 12px 26px rgba(3,12,28,.2) !important;
}
body.b2b-dashboard-page .b2b-page-identity b,
body.b2b-dashboard-page .b2b-page-identity small{
color:#fff !important;
}
body.b2b-dashboard-page .b2b-page-identity span{
background:rgba(31,179,197,.16) !important;
color:#8feaf2 !important;
}
body.b2b-dashboard-page .b2b-language-btn,
body.b2b-dashboard-page .b2b-notification-btn,
body.b2b-dashboard-page .b2b-vip-icon,
body.b2b-dashboard-page .b2b-menu-btn{
background:rgba(255,255,255,.08) !important;
border-color:rgba(255,255,255,.16) !important;
color:#fff !important;
}
body.b2b-dashboard-page .b2b-vip-icon{
color:#f5c85f !important;
}
body.b2b-dashboard-page .b2b-mobile-bottom{
background:linear-gradient(135deg,#061b33 0%,#071e39 100%) !important;
border-top:1px solid rgba(255,255,255,.1) !important;
box-shadow:0 -16px 36px rgba(3,12,28,.22) !important;
}
body.b2b-dashboard-page .b2b-mobile-request-strip{
display:none !important;
}
body.b2b-dashboard-page .b2b-market-search-row{
margin-bottom:8px !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters{
display:flex !important;
gap:7px !important;
overflow-x:auto !important;
-webkit-overflow-scrolling:touch !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters button{
flex:0 0 auto !important;
min-height:32px !important;
padding:7px 12px !important;
border-radius:999px !important;
font-size:10px !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row{
grid-template:
"photo info" 136px
"tracking tracking" auto
"products products" auto
"stock stock" auto
/ minmax(104px,31%) minmax(0,1fr) !important;
gap:0 !important;
margin:0 0 14px !important;
border:1px solid rgba(9,36,67,.08) !important;
border-radius:20px !important;
overflow:hidden !important;
background:#fff !important;
box-shadow:0 14px 34px rgba(6,27,51,.12) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers .shipment-photo{
height:136px !important;
min-height:136px !important;
max-height:136px !important;
border-radius:18px 0 0 0 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers .shipment-info{
min-height:136px !important;
padding:9px 10px 7px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-route-title,
body.b2b-dashboard-page section#all-containers .shipment-route-title{
margin:0 0 7px !important;
gap:5px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-route-title span,
body.b2b-dashboard-page section#all-containers .shipment-route-title span{
font-size:10px !important;
line-height:1.08 !important;
color:#061b33 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts,
body.b2b-dashboard-page section#all-containers .shipment-facts{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:6px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span,
body.b2b-dashboard-page section#all-containers .shipment-facts span{
min-height:34px !important;
padding:6px !important;
border-radius:11px !important;
background:#f7fbfd !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:nth-child(n+5),
body.b2b-dashboard-page section#all-containers .shipment-facts span:nth-child(n+5){
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts small,
body.b2b-dashboard-page section#all-containers .shipment-facts small{
font-size:7px !important;
color:#6e7d8d !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts b,
body.b2b-dashboard-page section#all-containers .shipment-facts b{
font-size:9px !important;
color:#061b33 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products,
body.b2b-dashboard-page section#all-containers .shipment-products{
grid-area:products !important;
display:flex !important;
flex-wrap:wrap !important;
gap:7px !important;
padding:8px 9px 9px !important;
border-top:1px solid rgba(9,36,67,.08) !important;
background:#fbfdff !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3,
body.b2b-dashboard-page section#all-containers .shipment-products h3{
flex:0 0 100% !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
margin:0 !important;
padding:0 !important;
font-size:10px !important;
letter-spacing:.02em !important;
color:#061b33 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3 small,
body.b2b-dashboard-page section#all-containers .shipment-products h3 small{
display:inline-flex !important;
font-size:8px !important;
font-weight:800 !important;
color:#168796 !important;
text-transform:uppercase !important;
letter-spacing:.06em !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3 button,
body.b2b-dashboard-page section#all-containers .shipment-products h3 button{
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card,
body.b2b-dashboard-page section#all-containers .shipment-product-card{
flex:1 1 calc(33.333% - 6px) !important;
min-width:92px !important;
max-width:calc(33.333% - 4px) !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:5px !important;
padding:6px !important;
border-radius:14px !important;
background:#fff !important;
border:1px solid rgba(9,36,67,.08) !important;
box-shadow:0 8px 20px rgba(6,27,51,.07) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card img,
body.b2b-dashboard-page section#all-containers .shipment-product-card img{
width:100% !important;
height:42px !important;
border-radius:10px !important;
object-fit:cover !important;
background:#eef6f9 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card span,
body.b2b-dashboard-page section#all-containers .shipment-product-card span{
min-width:0 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card b,
body.b2b-dashboard-page section#all-containers .shipment-product-card b{
display:block !important;
font-size:8.2px !important;
line-height:1.14 !important;
color:#061b33 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card small,
body.b2b-dashboard-page section#all-containers .shipment-product-card small{
display:block !important;
font-size:6.8px !important;
line-height:1.1 !important;
color:#748293 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card strong,
body.b2b-dashboard-page section#all-containers .shipment-product-card strong{
font-size:8px !important;
line-height:1.08 !important;
color:#0d7988 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card strong small,
body.b2b-dashboard-page section#all-containers .shipment-product-card strong small,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card em,
body.b2b-dashboard-page section#all-containers .shipment-product-card em{
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products-more,
body.b2b-dashboard-page section#all-containers .shipment-products-more{
flex:1 1 100% !important;
min-height:28px !important;
border-radius:12px !important;
font-size:9px !important;
background:#eef8fa !important;
color:#087584 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-mini-tracking,
body.b2b-dashboard-page section#all-containers .shipment-mini-tracking{
grid-area:tracking !important;
padding:7px 9px 8px !important;
background:#fff !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock,
body.b2b-dashboard-page section#all-containers .shipment-stock{
grid-area:stock !important;
grid-template-columns:40px minmax(0,1fr) !important;
gap:8px !important;
padding:9px !important;
background:#fff !important;
border-top:1px solid rgba(9,36,67,.08) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock .b2b-mobile-card-more,
body.b2b-dashboard-page section#all-containers .shipment-stock .b2b-mobile-card-more{
grid-column:1 !important;
grid-row:1 !important;
width:40px !important;
min-width:40px !important;
height:38px !important;
min-height:38px !important;
border-radius:13px !important;
background:#f6f1e5 !important;
color:#a97315 !important;
border:1px solid rgba(202,150,54,.28) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta{
grid-column:2 !important;
grid-row:1 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:38px !important;
padding:8px 10px !important;
border-radius:13px !important;
background:linear-gradient(135deg,#c99636 0%,#f1ce72 52%,#b9771f 100%) !important;
color:#061b33 !important;
font-size:10px !important;
font-weight:900 !important;
letter-spacing:.01em !important;
box-shadow:0 10px 22px rgba(177,122,34,.22) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a:not(.b2b-sparkle-cta),
body.b2b-dashboard-page section#all-containers .shipment-stock a:not(.b2b-sparkle-cta),
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock .b2b-commercial-disabled,
body.b2b-dashboard-page section#all-containers .shipment-stock .b2b-commercial-disabled{
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .stock-panel,
body.b2b-dashboard-page section#all-containers .stock-panel{
grid-column:1 / -1 !important;
grid-row:2 !important;
margin-top:0 !important;
}
body.b2b-dashboard-page .b2b-label-desktop{
display:none !important;
}
body.b2b-dashboard-page .b2b-label-mobile{
display:inline !important;
}
body.b2b-dashboard-page input,
body.b2b-dashboard-page select,
body.b2b-dashboard-page textarea{
font-size:16px !important;
}
html[dir="rtl"] body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
html[dir="rtl"] body.b2b-dashboard-page section#all-containers .shipment-row{
grid-template:
"info photo" 136px
"tracking tracking" auto
"products products" auto
"stock stock" auto
/ minmax(0,1fr) minmax(104px,31%) !important;
}
html[dir="rtl"] body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
html[dir="rtl"] body.b2b-dashboard-page section#all-containers .shipment-photo{
border-radius:0 18px 0 0 !important;
}
}
@media (max-width:370px){
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row{
grid-template:
"photo info" 130px
"tracking tracking" auto
"products products" auto
"stock stock" auto
/ 96px minmax(0,1fr) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers .shipment-photo,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers .shipment-info{
height:130px !important;
min-height:130px !important;
max-height:130px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card,
body.b2b-dashboard-page section#all-containers .shipment-product-card{
min-width:86px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta{
font-size:9.2px !important;
padding-inline:7px !important;
}
}
/* B2B Global Trade customer sidebar replacement */
body.b2b-dashboard-page .b2b-app-shell{
grid-template-columns:272px minmax(0, 1fr);
}
body.b2b-dashboard-page .b2b-sidebar{
padding:24px 18px;
background:
radial-gradient(circle at 50% 8%, rgba(34,135,211,0.18), transparent 34%),
linear-gradient(180deg, #021323 0%, #041b31 54%, #021121 100%);
box-shadow:inset -1px 0 0 rgba(80,215,231,0.12);
}
body.b2b-dashboard-page .b2b-dash-brand{
gap:13px;
margin-bottom:26px;
}
body.b2b-dashboard-page .b2b-dash-brand img{
width:54px;
height:54px;
border:2px solid rgba(255,255,255,0.78);
box-shadow:0 12px 32px rgba(0,0,0,0.22);
}
body.b2b-dashboard-page .b2b-dash-brand b{
color:#ffffff;
font-size:28px;
letter-spacing:0;
}
body.b2b-dashboard-page .b2b-dash-brand small{
color:rgba(255,255,255,0.82);
font-size:12px;
font-weight:600;
}
body.b2b-dashboard-page .b2b-global-sidebar-nav{
gap:12px;
margin:0 0 20px;
}
body.b2b-dashboard-page .b2b-global-sidebar-nav a{
min-height:0;
padding:14px;
border:1px solid rgba(117,154,188,0.32);
border-radius:16px;
background:rgba(4,27,50,0.62);
color:#ffffff;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
body.b2b-dashboard-page .b2b-global-sidebar-nav a:hover{
background:rgba(8,48,82,0.82);
color:#ffffff;
}
body.b2b-dashboard-page .b2b-global-sidebar-nav a:hover i{
color:#d6ad48;
}
body.b2b-dashboard-page .b2b-side-primary{
display:grid;
grid-template-columns:42px minmax(0, 1fr);
gap:14px;
align-items:center;
}
body.b2b-dashboard-page .b2b-side-primary > i,
body.b2b-dashboard-page .b2b-side-tool > i{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:12px;
background:#062948;
color:#ffffff;
font-size:19px;
}
body.b2b-dashboard-page .b2b-side-primary b,
body.b2b-dashboard-page .b2b-side-tool b{
display:block;
color:#ffffff;
font-size:16px;
line-height:1.18;
}
body.b2b-dashboard-page .b2b-side-primary small,
body.b2b-dashboard-page .b2b-side-tool small{
display:block;
margin-top:5px;
color:rgba(255,255,255,0.78);
font-size:12px;
font-weight:600;
line-height:1.35;
}
body.b2b-dashboard-page .b2b-side-trade.active{
position:relative;
overflow:visible;
border-color:#f0bd45;
background:linear-gradient(135deg, #f7cc55, #d6a136);
color:#061b33;
box-shadow:0 16px 34px rgba(214,173,72,0.28);
}
body.b2b-dashboard-page .b2b-side-trade.active::after{
content:"";
position:absolute;
right:-10px;
top:50%;
width:20px;
height:20px;
transform:translateY(-50%) rotate(45deg);
border-radius:3px;
background:#d6a136;
}
body.b2b-dashboard-page .b2b-side-trade.active i{
background:rgba(6,27,51,0.12);
color:#061b33;
}
body.b2b-dashboard-page .b2b-side-trade.active b,
body.b2b-dashboard-page .b2b-side-trade.active small{
color:#061b33;
}
body.b2b-dashboard-page .b2b-side-section-title{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:10px;
align-items:center;
margin:8px 0 2px;
color:#f1bd3f;
text-transform:uppercase;
letter-spacing:.06em;
font-size:12px;
font-weight:900;
}
body.b2b-dashboard-page .b2b-side-section-title span{
height:1px;
background:linear-gradient(90deg, transparent, #d6ad48);
}
body.b2b-dashboard-page .b2b-side-section-title span:last-child{
background:linear-gradient(90deg, #d6ad48, transparent);
}
body.b2b-dashboard-page .b2b-side-tool{
display:grid;
grid-template-columns:42px minmax(0, 1fr) 18px;
gap:12px;
align-items:center;
}
body.b2b-dashboard-page .b2b-side-tool > em{
margin:0;
padding:0;
background:transparent;
}
body.b2b-dashboard-page .b2b-side-tool > em i{
width:auto;
color:rgba(255,255,255,0.86);
}
body.b2b-dashboard-page .b2b-side-vip-tool{
border-color:rgba(214,173,72,0.72) !important;
box-shadow:0 0 0 1px rgba(214,173,72,0.12), inset 0 1px 0 rgba(214,173,72,0.08);
}
body.b2b-dashboard-page .b2b-side-vip-tool > i{
color:#d6ad48;
}
body.b2b-dashboard-page .b2b-partner-card,
body.b2b-dashboard-page .b2b-help-card{
margin-top:16px;
border:1px solid rgba(80,155,226,0.36);
border-radius:18px;
background:linear-gradient(145deg, rgba(8,52,91,0.78), rgba(3,24,45,0.88));
box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 40px rgba(0,0,0,0.16);
}
body.b2b-dashboard-page .b2b-partner-card{
display:grid;
grid-template-columns:74px minmax(0, 1fr);
gap:14px;
padding:18px;
}
body.b2b-dashboard-page .b2b-partner-badge{
display:grid;
align-content:center;
justify-items:center;
min-height:88px;
border-radius:16px;
color:#061b33;
background:linear-gradient(135deg, #f7cc55, #d6a136);
font-family:"Space Grotesk", sans-serif;
}
body.b2b-dashboard-page .b2b-partner-badge i{
color:#061b33;
font-size:22px;
}
body.b2b-dashboard-page .b2b-partner-badge b{
font-size:25px;
line-height:1;
}
body.b2b-dashboard-page .b2b-partner-badge small{
color:#061b33;
text-transform:uppercase;
font-size:9px;
}
body.b2b-dashboard-page .b2b-partner-card strong,
body.b2b-dashboard-page .b2b-help-card strong{
display:block;
color:#ffffff;
font-size:18px;
line-height:1.12;
}
body.b2b-dashboard-page .b2b-partner-card p,
body.b2b-dashboard-page .b2b-help-card p{
margin:8px 0 12px;
color:rgba(255,255,255,0.78);
font-size:12px;
line-height:1.45;
}
body.b2b-dashboard-page .b2b-partner-card a{
width:100%;
min-height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:8px;
border-radius:10px;
text-decoration:none;
font-size:12px;
font-weight:900;
}
body.b2b-dashboard-page .b2b-partner-signin{
background:linear-gradient(135deg, #f7cc55, #d6a136);
color:#061b33;
}
body.b2b-dashboard-page .b2b-partner-apply{
border:1px solid rgba(255,255,255,0.42);
color:#ffffff;
}
body.b2b-dashboard-page .b2b-help-card{
display:grid;
grid-template-columns:54px minmax(0, 1fr);
gap:14px;
align-items:center;
padding:18px;
}
body.b2b-dashboard-page .b2b-help-card > span{
width:54px;
height:54px;
display:grid;
place-items:center;
border-radius:50%;
background:#0a3864;
color:#ffffff;
font-size:24px;
}
body.b2b-dashboard-page .b2b-help-card a{
display:inline-flex;
align-items:center;
gap:7px;
color:#ffffff;
font-size:16px;
font-weight:900;
text-decoration:none;
}
body.b2b-dashboard-page .b2b-help-card a i{
color:#28d263;
}
body.b2b-dashboard-page .b2b-help-card small{
display:block;
margin-top:8px;
color:rgba(255,255,255,0.68);
font-size:10px;
}
body.b2b-dashboard-page .b2b-account-menu{
position:relative;
}
body.b2b-dashboard-page .b2b-account-menu summary{
list-style:none;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-account-menu summary::-webkit-details-marker{
display:none;
}
body.b2b-dashboard-page .b2b-account .fa-chevron-down{
margin-left:2px;
color:rgba(255,255,255,0.7);
font-size:11px;
}
body.b2b-dashboard-page .b2b-account-dropdown{
position:absolute;
right:0;
top:calc(100% + 12px);
z-index:95;
width:230px;
display:grid;
gap:4px;
padding:10px;
border:1px solid rgba(7,27,51,0.1);
border-radius:14px;
background:#ffffff;
box-shadow:0 20px 50px rgba(7,27,51,0.2);
}
body.b2b-dashboard-page .b2b-account-dropdown a{
padding:10px 12px;
border-radius:10px;
color:#102438;
text-decoration:none;
font-size:12px;
font-weight:850;
}
body.b2b-dashboard-page .b2b-account-dropdown a:hover{
background:#eff7fa;
color:#087a94;
}
body.b2b-dashboard-page .b2b-mobile-drawer{
position:fixed;
inset:0;
z-index:90;
display:none;
background:rgba(1,10,20,0.62);
}
body.b2b-dashboard-page .b2b-mobile-drawer.is-open{
display:block;
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel{
width:min(88vw, 360px);
height:100%;
overflow-y:auto;
padding:22px 18px;
background:
radial-gradient(circle at 50% 0, rgba(34,135,211,0.18), transparent 35%),
linear-gradient(180deg, #021323, #041b31 58%, #021121);
color:#ffffff;
box-shadow:20px 0 50px rgba(0,0,0,0.32);
}
body.b2b-dashboard-page .b2b-mobile-drawer-close{
width:42px;
height:42px;
display:grid;
place-items:center;
margin-left:auto;
border:1px solid rgba(255,255,255,0.18);
border-radius:14px;
background:rgba(255,255,255,0.08);
color:#ffffff;
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel > a{
display:grid;
grid-template-columns:42px minmax(0, 1fr);
gap:12px;
align-items:center;
margin-top:10px;
padding:13px;
border:1px solid rgba(117,154,188,0.32);
border-radius:16px;
color:#ffffff;
text-decoration:none;
background:rgba(4,27,50,0.62);
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel > a.active{
border-color:#f0bd45;
background:linear-gradient(135deg, #f7cc55, #d6a136);
color:#061b33;
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel > a.vip{
border-color:rgba(214,173,72,0.72);
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel > a > i{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:12px;
background:#062948;
color:#ffffff;
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel > a.active > i{
background:rgba(6,27,51,0.12);
color:#061b33;
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel b{
display:block;
font-size:15px;
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel small{
display:block;
margin-top:4px;
color:rgba(255,255,255,0.72);
font-size:11px;
line-height:1.35;
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel > a.active small{
color:#061b33;
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel p{
margin:18px 0 8px;
color:#f1bd3f;
text-transform:uppercase;
letter-spacing:.08em;
font-size:12px;
font-weight:900;
}
body.b2b-dashboard-page .b2b-mobile-partner-actions{
display:grid;
gap:10px;
margin-top:16px;
padding:14px;
border:1px solid rgba(80,155,226,0.36);
border-radius:18px;
background:linear-gradient(145deg, rgba(8,52,91,0.78), rgba(3,24,45,0.88));
}
body.b2b-dashboard-page .b2b-mobile-partner-actions a{
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
border-radius:11px;
text-decoration:none;
font-weight:900;
}
body.b2b-dashboard-page .b2b-mobile-partner-actions a:first-child{
background:linear-gradient(135deg, #f7cc55, #d6a136);
color:#061b33;
}
body.b2b-dashboard-page .b2b-mobile-partner-actions a:last-child{
border:1px solid rgba(255,255,255,0.4);
color:#ffffff;
}
body.b2b-dashboard-page .b2b-mobile-help{
margin-top:14px;
padding:16px;
border:1px solid rgba(80,155,226,0.36);
border-radius:18px;
background:rgba(4,27,50,0.62);
}
body.b2b-dashboard-page .b2b-mobile-help span{
display:block;
margin:5px 0 10px;
color:rgba(255,255,255,0.72);
}
body.b2b-dashboard-page .b2b-mobile-help a{
color:#ffffff;
font-weight:900;
text-decoration:none;
}
body.b2b-dashboard-page .b2b-mobile-help i{
color:#28d263;
}
@media (max-width:1040px){
body.b2b-dashboard-page .b2b-app-shell{ grid-template-columns:230px minmax(0, 1fr); }
body.b2b-dashboard-page .b2b-dash-brand b{ font-size:22px; }
body.b2b-dashboard-page .b2b-dash-brand small,
body.b2b-dashboard-page .b2b-side-primary small,
body.b2b-dashboard-page .b2b-side-tool small{ font-size:10px; }
body.b2b-dashboard-page .b2b-side-primary b,
body.b2b-dashboard-page .b2b-side-tool b{ font-size:13px; }
body.b2b-dashboard-page .b2b-partner-card{ grid-template-columns:1fr; }
}
@media (max-width:920px){
body.b2b-dashboard-page .b2b-app-shell{ display:block; }
body.b2b-dashboard-page .b2b-sidebar{
height:auto;
padding:12px 16px;
overflow:visible;
background:#ffffff;
color:#061b33;
}
body.b2b-dashboard-page .b2b-dash-brand{ margin-bottom:0; }
body.b2b-dashboard-page .b2b-dash-brand img{ width:42px; height:42px; }
body.b2b-dashboard-page .b2b-dash-brand b{ color:#061b33; font-size:21px; }
body.b2b-dashboard-page .b2b-dash-brand small{ color:#52697a; font-size:9px; }
body.b2b-dashboard-page .b2b-global-sidebar-nav,
body.b2b-dashboard-page .b2b-partner-card,
body.b2b-dashboard-page .b2b-help-card{ display:none; }
body.b2b-dashboard-page .b2b-topbar{ top:65px; }
}
@media (max-width:620px){
body.b2b-dashboard-page .b2b-sidebar{
height:118px;
padding:22px 24px 12px;
}
body.b2b-dashboard-page .b2b-dash-brand img{ width:58px; height:58px; }
body.b2b-dashboard-page .b2b-dash-brand b{ font-size:25px; }
body.b2b-dashboard-page .b2b-topbar{ top:34px; }
body.b2b-dashboard-page .b2b-account-menu{ display:none; }
}
*{ box-sizing: border-box; }
/* Safety net so no ![]()
(app screenshots, icons, logos) can ever force
horizontal overflow on a narrow screen. This was previously only applied
inside the ≤768px media query, so images with an explicit width attribute
wider than their container had no protection between ~769–991px. Doesn't
change any image's rendered size on desktop where images already fit
their containers by design. */
img{ max-width: 100%; height: auto; }
/* html previously had no background — only did. On mobile, elastic/
rubber-band overscroll (normal touch scrolling, and Chrome DevTools'
mobile emulation) briefly exposes the canvas underneath ,
which defaults to white. That's the white flash/overlay around the hero:
desktop mouse-wheel scrolling doesn't bounce, so it never showed there.
overscroll-behavior-y stops the bounce itself (belt-and-suspenders with
the background fix — either alone fixes it, both together is safest). */
html{
scroll-behavior: smooth;
background: var(--navy-deep);
overscroll-behavior-y: none;
}
body{
margin:0;
background: var(--navy-deep);
color: var(--text-hi);
font-family:'Inter', sans-serif;
overflow-x: hidden;
overscroll-behavior-y: none;
-webkit-font-smoothing: antialiased;
}
body::before{
content:'';
position: fixed; inset:0;
background:
radial-gradient(ellipse 900px 500px at 15% -10%, rgba(59,110,246,0.22), transparent 60%),
radial-gradient(ellipse 700px 500px at 100% 20%, rgba(41,231,255,0.12), transparent 60%),
var(--navy-deep);
z-index:-2;
pointer-events:none;
}
::selection{ background: rgba(41,231,255,0.3); color:#fff; }
h1,h2,h3,h4{
font-family:'Space Grotesk', sans-serif;
margin:0;
letter-spacing:-0.01em;
line-height:1.08;
color: var(--text-hi);
}
p{ color: var(--text-mid); line-height:1.65; margin:0; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'JetBrains Mono', monospace; letter-spacing: 0.04em; }
.container{ max-width: 1240px; margin: 0 auto; padding: 0 32px; }
section{ position: relative; padding: 120px 0; }
@media (max-width: 768px){ section{ padding: 72px 0; } .container{ padding: 0 20px; } }
.eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-family:'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--cyan-soft);
margin-bottom: 18px;
}
.eyebrow::before{
content:''; width:7px; height:7px; border-radius:50%;
background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
}
.section-head{ max-width: 640px; margin-bottom: 64px; }
.section-head h2{ font-size: clamp(30px, 4vw, 46px); font-weight:600; }
.section-head p{ margin-top:16px; font-size:17px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
/* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding: 15px 28px; border-radius: 999px;
font-family:'Inter'; font-weight:600; font-size:14.5px; letter-spacing:0.01em;
cursor:pointer; border: 1px solid transparent; transition: all .35s var(--ease);
white-space: nowrap;
}
.btn-primary{
background: linear-gradient(135deg, var(--cyan), var(--blue));
color:#031019;
box-shadow: 0 0 0 1px rgba(41,231,255,0.4), 0 8px 30px -6px rgba(41,231,255,0.45);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(41,231,255,.6), 0 14px 36px -6px rgba(41,231,255,.6); }
.btn-ghost{
background: rgba(255,255,255,0.04);
border-color: rgba(120,170,220,0.32); /* was 0.14 — too faint to read reliably against photos/edge cases */
color: var(--text-hi);
backdrop-filter: blur(6px);
}
.btn-ghost:hover{ border-color: var(--line-bright); background: rgba(41,231,255,0.06); }
.btn-sm{ padding: 11px 20px; font-size: 13px; }
/* ---------- Glass card ---------- */
.glass{
background: var(--navy-panel);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
position: relative;
}
.glass::after{
content:''; position:absolute; inset:0; border-radius: inherit; padding:1px;
background: linear-gradient(160deg, rgba(127,231,255,0.35), transparent 40%, transparent 70%, rgba(59,110,246,0.25));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events:none;
}
.glow-hover{ transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.glow-hover:hover{ transform: translateY(-6px); border-color: var(--line-bright); box-shadow: 0 20px 50px -20px rgba(41,231,255,0.35); }
/* ---------- Navbar ---------- */
.navbar{
position: fixed; top:0; left:0; right:0; z-index: 6000;
padding: 14px 0;
transition: all .4s var(--ease);
border-bottom: 1px solid rgba(17,52,78,0.12);
background:rgba(255,255,255,0.94);
box-shadow:0 14px 38px rgba(6,22,34,0.1);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
transform:none !important;
visibility:visible !important;
}
.navbar.scrolled{
background:rgba(255,255,255,0.97);
border-bottom:1px solid rgba(17,52,78,0.14);
padding:10px 0;
box-shadow:0 16px 42px rgba(6,22,34,0.13);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }
.brand{
display:inline-flex;
align-items:center;
gap:12px;
min-height:48px;
padding:6px 12px 6px 7px;
border-radius:999px;
background:linear-gradient(135deg, rgba(255,255,255,0.98), rgba(236,249,251,0.96));
border:1px solid rgba(11,159,175,0.18);
box-shadow:0 10px 26px rgba(6,31,48,0.08);
}
.brand img{
width:40px;
height:40px;
padding:3px;
border-radius:50%;
background:#fff;
object-fit:contain;
box-shadow:0 6px 18px rgba(9,48,70,0.12);
}
.brand-name{
font-family:'Space Grotesk', 'Inter', sans-serif;
font-weight:800;
font-size:19px;
line-height:1;
letter-spacing:0.045em;
color:#082b43;
text-transform:uppercase;
}
.brand-name span{
color:#0b9faf;
text-shadow:0 0 16px rgba(41,231,255,0.28);
}
.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
font-size: 14px; font-weight:650; color:#315269;
position:relative; padding: 6px 0; transition: color .3s;
}
.site-nav-links{
gap:24px;
flex:1;
justify-content:center;
}
.site-nav-links a{
font-size:13.5px;
white-space:nowrap;
}
.nav-app-link{
display:inline-flex;
align-items:center;
gap:6px;
color:#0b7786 !important;
font-weight:750 !important;
}
.nav-app-link i{
font-size:13px;
}
.nav-b2b-link{
position:relative;
display:inline-flex;
align-items:center;
gap:7px;
min-height:40px;
padding:0 13px !important;
border:1px solid rgba(196,154,58,0.48);
border-radius:999px;
background:
linear-gradient(135deg, rgba(7,48,71,0.98), rgba(8,85,108,0.96)),
radial-gradient(circle at 10% 10%, rgba(255,222,126,0.28), transparent 36%);
color:#ffffff !important;
box-shadow:0 12px 26px rgba(6,31,48,0.14);
animation:b2bNavGlow 2.8s ease-in-out infinite;
}
.nav-b2b-link::after{
content:"";
display:block;
position:absolute;
top:7px;
right:8px;
width:8px;
height:8px;
border-radius:50%;
background:#37f4ff;
box-shadow:0 0 0 0 rgba(55,244,255,0.46);
animation:b2bLiveDot 1.7s ease-out infinite;
}
.nav-b2b-link i{
color:#d8b04d;
font-size:13px;
}
.nav-b2b-link span{
display:inline-block;
}
.nav-b2b-link em,
.nav-b2b-menu-link em,
.mobile-b2b-link em{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:34px;
height:18px;
padding:0 7px;
border-radius:999px;
background:#d8b04d;
color:#061f30;
font-family:'Inter', sans-serif;
font-size:10px;
font-style:normal;
font-weight:900;
letter-spacing:.08em;
line-height:1;
}
.nav-b2b-link em,
.mobile-b2b-link em{
animation:b2bBadgeBlink 2.2s ease-in-out infinite;
}
.nav-b2b-link:hover,
.nav-b2b-link:focus-visible{
transform:translateY(-1px);
border-color:rgba(216,176,77,0.7);
background:linear-gradient(135deg, #06263b, #0b8ea0);
box-shadow:0 16px 34px rgba(6,31,48,0.2);
}
@keyframes b2bNavGlow{
0%, 100%{ box-shadow:0 12px 26px rgba(6,31,48,0.14), 0 0 0 rgba(55,244,255,0); }
50%{ box-shadow:0 16px 34px rgba(6,31,48,0.22), 0 0 18px rgba(55,244,255,0.25); }
}
@keyframes b2bLiveDot{
0%{ box-shadow:0 0 0 0 rgba(55,244,255,0.48); opacity:1; }
72%{ box-shadow:0 0 0 10px rgba(55,244,255,0); opacity:.78; }
100%{ box-shadow:0 0 0 0 rgba(55,244,255,0); opacity:1; }
}
@keyframes b2bBadgeBlink{
0%, 100%{ filter:brightness(1); transform:translateZ(0); }
50%{ filter:brightness(1.24); transform:translateZ(0) scale(1.04); }
}
@keyframes b2bStatusGlow{
0%, 100%{ filter:brightness(1); }
50%{ filter:brightness(1.16); }
}
@keyframes b2bStatusSweep{
0%, 36%{ left:-52%; opacity:0; }
48%{ opacity:.8; }
68%, 100%{ left:116%; opacity:0; }
}
@keyframes b2bTextPulse{
0%, 100%{ color:#0883ca; }
50%{ color:#0b9faf; }
}
@media (prefers-reduced-motion: reduce){
.nav-b2b-link,
.nav-b2b-link::after,
.nav-b2b-link em,
.mobile-b2b-link em,
.shipment-photo > span,
.shipment-photo > span::after,
.b2b-story-status,
.b2b-story-status::after,
.mini-current-status i,
.mini-current-status b{
animation:none !important;
}
}
/* Compact premium B2B search sizing. */
body.b2b-dashboard-page .b2b-market-search-row{
align-items:center !important;
justify-content:flex-end !important;
gap:10px !important;
margin:0 0 10px !important;
}
body.b2b-dashboard-page .b2b-grand-search{
grid-template-columns:30px minmax(0,1fr) 28px 86px !important;
max-width:720px !important;
min-height:46px !important;
padding:5px !important;
gap:5px !important;
border-radius:17px !important;
border-color:rgba(14,137,151,.2) !important;
background:
linear-gradient(135deg, rgba(255,255,255,.99), rgba(248,253,253,.98)) padding-box,
linear-gradient(135deg, rgba(15,167,181,.42), rgba(214,161,54,.28)) border-box !important;
box-shadow:0 12px 28px rgba(7,27,51,.08), 0 0 0 3px rgba(15,167,181,.045) !important;
}
body.b2b-dashboard-page .b2b-grand-search.is-active{
box-shadow:0 16px 36px rgba(7,27,51,.12), 0 0 0 4px rgba(15,167,181,.075) !important;
}
body.b2b-dashboard-page .b2b-search-icon{
width:30px !important;
height:30px !important;
border-radius:11px !important;
font-size:12px !important;
}
body.b2b-dashboard-page .b2b-grand-search input[type="search"]{
min-height:30px !important;
font-size:13px !important;
font-weight:800 !important;
}
body.b2b-dashboard-page .b2b-grand-search > button[type="submit"]{
min-width:86px !important;
min-height:31px !important;
padding:0 11px !important;
border-radius:11px !important;
font-size:12px !important;
box-shadow:0 8px 18px rgba(7,27,51,.13) !important;
}
body.b2b-dashboard-page .b2b-grand-search .b2b-search-clear{
width:28px !important;
height:28px !important;
border-radius:10px !important;
}
body.b2b-dashboard-page .b2b-search-hints{
gap:5px !important;
min-height:24px !important;
padding:0 2px 1px !important;
}
body.b2b-dashboard-page .b2b-search-hints button{
min-height:23px !important;
padding:0 8px !important;
gap:5px !important;
border-radius:999px !important;
font-size:10px !important;
background:rgba(245,251,252,.86) !important;
}
body.b2b-dashboard-page .b2b-search-hints button i{
font-size:10px !important;
}
body.b2b-dashboard-page .b2b-search-hints button span{
font-size:9px !important;
}
body.b2b-dashboard-page .b2b-search-hints button b{
max-width:145px !important;
}
body.b2b-dashboard-page .b2b-grand-search-panel{
top:calc(100% + 8px) !important;
border-radius:17px !important;
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-grand-search{
grid-template-columns:30px minmax(0,1fr) 28px 36px !important;
max-width:none !important;
min-height:44px !important;
padding:5px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-grand-search > button[type="submit"]{
width:36px !important;
min-width:36px !important;
min-height:30px !important;
}
body.b2b-dashboard-page .b2b-search-hints button{
max-width:178px !important;
}
body.b2b-dashboard-page .b2b-search-hints button:nth-child(n+4){
display:none !important;
}
}
/* Final B2B search compact lock. */
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
width:min(100%, 680px) !important;
max-width:680px !important;
min-height:42px !important;
padding:4px !important;
grid-template-columns:28px minmax(0,1fr) 26px 78px !important;
border-radius:15px !important;
}
body.b2b-dashboard-page .b2b-search.b2b-grand-search .b2b-search-icon{
width:28px !important;
height:28px !important;
border-radius:10px !important;
}
body.b2b-dashboard-page .b2b-search.b2b-grand-search input[type="search"]{
min-height:28px !important;
font-size:12.5px !important;
}
body.b2b-dashboard-page .b2b-search.b2b-grand-search .b2b-search-clear{
width:26px !important;
height:26px !important;
}
body.b2b-dashboard-page .b2b-search.b2b-grand-search > button[type="submit"]{
min-width:78px !important;
min-height:28px !important;
padding:0 9px !important;
border-radius:10px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-search.b2b-grand-search .b2b-search-hints{
min-height:20px !important;
gap:4px !important;
padding:0 1px !important;
}
body.b2b-dashboard-page .b2b-search.b2b-grand-search .b2b-search-hints button{
min-height:20px !important;
padding:0 7px !important;
font-size:9.5px !important;
}
body.b2b-dashboard-page .b2b-search.b2b-grand-search .b2b-search-hints button:nth-child(n+5){
display:none !important;
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
width:100% !important;
max-width:none !important;
grid-template-columns:28px minmax(0,1fr) 26px 34px !important;
}
body.b2b-dashboard-page .b2b-search.b2b-grand-search > button[type="submit"]{
width:34px !important;
min-width:34px !important;
font-size:0 !important;
}
}
.nav-dropdown{
position:relative;
}
.nav-dropdown-toggle{
display:inline-flex;
align-items:center;
gap:7px;
padding:6px 0;
border:0;
background:transparent;
color:#315269;
font:600 13.5px/1 'Inter', sans-serif;
cursor:pointer;
transition:color .25s var(--ease);
}
.nav-dropdown-toggle i{
font-size:10px;
transition:transform .25s var(--ease);
}
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown.open .nav-dropdown-toggle,
.nav-dropdown-toggle[aria-current="page"]{
color:#0b7786;
}
.nav-dropdown:hover .nav-dropdown-toggle i,
.nav-dropdown.open .nav-dropdown-toggle i{
transform:rotate(180deg);
}
.nav-dropdown-menu{
position:absolute;
top:calc(100% + 16px);
left:50%;
width:560px;
max-width:min(86vw,560px);
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:14px;
padding:18px;
border:1px solid rgba(11,159,175,0.16);
border-radius:18px;
background:rgba(255,255,255,0.97);
box-shadow:0 22px 58px rgba(6,31,48,0.14);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
opacity:0;
pointer-events:none;
transform:translate(-50%,8px);
transition:opacity .22s var(--ease), transform .22s var(--ease);
z-index:7000;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{
opacity:1;
pointer-events:auto;
transform:translate(-50%,0);
}
.nav-menu-group{
display:grid;
gap:7px;
align-content:start;
}
.nav-menu-group span{
color:#8c6c2b;
font-size:11px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
padding:0 8px 4px;
}
.nav-menu-group a{
display:block;
padding:10px 9px;
border-radius:12px;
color:#0a3048;
font-size:13px;
font-weight:650;
}
.nav-menu-group a:hover,
.nav-menu-group a[aria-current="page"]{
background:#edfafd;
color:#0b7786;
}
.nav-links a::after{
content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
background: var(--cyan); transition: width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:#0b7786; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-right{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1100; background:none; border:none; padding:6px;}
.nav-toggle span{ width:22px; height:2px; background:#082b43; border-radius:2px; transition: all .3s; }
.mobile-menu{
position: fixed; inset:0; background: rgba(5,10,20,0.98); backdrop-filter: blur(10px);
z-index: 6500; display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:12px;
padding:96px 22px 32px;
opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
}
.mobile-menu.open{ opacity:1; pointer-events:all; }
.mobile-menu > a{
width:min(360px,100%);
margin:0 auto;
min-height:52px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 18px;
border:1px solid rgba(12,53,80,0.12);
border-radius:16px;
background:rgba(255,255,255,0.84);
box-shadow:0 12px 32px rgba(10,48,72,0.08);
font-size:18px;
font-family:'Space Grotesk';
font-weight:700;
color:#082b43;
}
.mobile-menu a[aria-current="page"]{
border-color:rgba(196,154,58,0.36);
background:linear-gradient(135deg,#ffffff,#fff8e7);
color:#0b7786;
}
.mobile-menu-group{
width:min(360px,100%);
margin:0 auto;
border:1px solid rgba(12,53,80,0.12);
border-radius:18px;
background:rgba(255,255,255,0.9);
box-shadow:0 12px 34px rgba(10,48,72,0.08);
overflow:hidden;
padding:0;
}
.mobile-menu-group summary{
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
min-height:52px;
padding:0 18px;
color:#082b43;
font-family:'Space Grotesk';
font-size:18px;
font-weight:800;
cursor:pointer;
}
.mobile-menu-group summary::-webkit-details-marker{
display:none;
}
.mobile-menu-group summary i{
font-size:13px;
transition:transform .25s var(--ease);
}
.mobile-menu-group[open] summary i{
transform:rotate(180deg);
}
.mobile-menu-group a{
display:block;
padding:12px 18px;
border-top:1px solid rgba(12,53,80,0.08);
font-size:15.5px;
font-weight:650;
color:#315269;
background:rgba(247,251,252,0.76);
}
@media (max-width: 1180px){
.nav-links{ display:none; }
.nav-right .btn{ display:none; }
.nav-toggle{ display:flex; }
}
/* ---------- Hero shared ---------- */
.page-hero{
padding: 190px 0 100px;
position: relative;
overflow:hidden;
/* Solid fallback so the hero is never blank/white while its background
photo is still downloading (e.g. on a slow connection) — this paints
instantly, independent of images, fonts, or JS having finished. */
background: var(--navy-deep);
}
.hero-full{ padding-top: 0; min-height: 100vh; display:flex; align-items:center; }
.device-mock{ width: min(260px, 100%); aspect-ratio: 260 / 520; box-sizing: border-box; }
.page-hero .container{ position: relative; z-index:2; }
.hero-bg{
position:absolute; inset:0; z-index:0;
background-size: cover; background-position:center;
}
.hero-bg::before{
content:''; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(4,8,16,0.55) 0%, rgba(6,13,28,0.88) 65%, var(--navy-deep) 100%);
}
.hero-bg::after{
content:''; position:absolute; inset:0;
background: radial-gradient(ellipse 800px 500px at 50% 0%, rgba(41,231,255,0.14), transparent 65%);
}
/* ===========================================================
HERO SLIDER — cinematic slides
=========================================================== */
.hero-slider{ position:relative; isolation:isolate; }
.hero-slides{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slide{
position:absolute; inset:0;
background-size:cover; background-position:center;
background-color: var(--navy-deep);
opacity:0; transform:scale(1.1);
transition: opacity 1.8s var(--ease), transform 9s linear;
z-index:0;
}
.hero-slide.active{ opacity:1; transform:scale(1); z-index:1; }
.hero-slide::before{
content:''; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(4,8,16,0.6) 0%, rgba(6,13,28,0.9) 65%, var(--navy-deep) 100%);
}
.hero-slide::after{
content:''; position:absolute; inset:0;
background: radial-gradient(ellipse 800px 500px at 50% 0%, rgba(41,231,255,0.16), transparent 65%);
}
.hero-slide[data-slide="1"]::after{ background: radial-gradient(ellipse 800px 500px at 20% 10%, rgba(59,110,246,0.2), transparent 65%); }
.hero-slide[data-slide="2"]::after{ background: radial-gradient(ellipse 800px 500px at 80% 10%, rgba(127,231,255,0.18), transparent 65%); }
.hero-fx{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.hero-content-wrap{ position:relative; z-index:3; width:100%; min-height: clamp(360px, 44vw, 460px); padding-top:120px; }
.hero-slide-content{
position:absolute; inset:0; padding-top:120px;
display:flex; flex-direction:column; justify-content:center;
opacity:0; transform:translateY(26px);
transition: opacity .9s var(--ease), transform .9s var(--ease);
pointer-events:none;
}
.hero-slide-content.active{ opacity:1; transform:none; pointer-events:auto; }
/* ---------- Hero content: single fluid source of truth ----------
Sizing is driven entirely by clamp() here (not inline styles), so
no breakpoint-specific font/layout overrides are needed anywhere
else in the stylesheet. This is the fix for the mobile hero: text
and CTAs both stay left-aligned and full-width at every size from
320px up to desktop, with one continuous scale instead of jumps. */
.hero-heading{
font-size: clamp(30px, 7vw, 68px);
font-weight: 700;
line-height: 1.14;
margin: 0;
max-width: 100%;
overflow-wrap: break-word;
}
.hero-gradient-text{
background: linear-gradient(120deg, var(--cyan), var(--blue));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-copy{
margin-top: clamp(16px, 3vw, 24px);
font-size: clamp(15px, 2vw, 18px);
line-height: 1.6;
max-width: 520px;
width: 100%;
}
.hero-cta-row{
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 16px;
margin-top: clamp(24px, 4vw, 38px);
width: 100%;
max-width: 100%;
}
.hero-cta-row .btn{
flex: 1 1 200px;
max-width: 320px;
min-height: 52px;
text-align: center;
}
@media (max-width: 480px){
.hero-cta-row{ flex-direction: column; }
.hero-cta-row .btn{ max-width: 100%; }
}
.hero-arrow{
position:absolute; top:50%; transform:translateY(-50%); z-index:4;
width:52px; height:52px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background: rgba(255,255,255,0.03); border:1px solid var(--line-bright);
backdrop-filter: blur(10px); color: var(--text-hi); font-size:26px; line-height:1;
cursor:pointer; transition: all .35s var(--ease);
}
.hero-arrow:hover{ background: rgba(41,231,255,0.14); border-color: var(--cyan); box-shadow: 0 0 24px rgba(41,231,255,0.3); }
.hero-arrow-left{ left: 20px; } .hero-arrow-right{ right: 20px; }
@media (max-width: 820px){ .hero-arrow{ width:40px; height:40px; font-size:20px; } .hero-arrow-left{ left:10px; } .hero-arrow-right{ right:10px; } }
.hero-dots{ position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:4; display:flex; align-items:center; gap:10px; }
.hero-dot{
width:9px; height:9px; border-radius:50%; padding:0; border:none; cursor:pointer;
background: rgba(255,255,255,0.28); transition: all .35s var(--ease);
}
.hero-dot.active{ width:30px; border-radius:6px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.hero-dot:hover{ background: rgba(127,231,255,0.6); }
/* ---------- Swimming fish system ---------- */
.fish-layer{ position:absolute; inset:0; overflow:hidden; }
.fish-track{
position:absolute; left:0; will-change: transform;
animation-name: swimRight; animation-timing-function: linear; animation-iteration-count: infinite;
filter: blur(var(--blur, 0px));
opacity: var(--op, 0.65);
}
.fish-track.dir-left{ animation-name: swimLeft; }
.fish-body{
width: calc(64px * var(--scale, 1));
animation: fishBob ease-in-out infinite alternate;
animation-duration: calc(var(--dur, 6s) * 0.4);
}
.fish-track.depth .fish-body{ animation-name: fishApproach; animation-direction: normal; animation-iteration-count: infinite; }
.fish-body svg{ display:block; width:100%; height:auto; filter: drop-shadow(0 0 8px rgba(41,231,255,0.35)); }
.fish-track.dir-left .fish-body svg{ transform: scaleX(-1); }
@keyframes swimRight{ from{ transform: translateX(-18vw); } to{ transform: translateX(118vw); } }
@keyframes swimLeft{ from{ transform: translateX(118vw); } to{ transform: translateX(-18vw); } }
@keyframes fishBob{ from{ transform: translateY(0) rotate(-4deg); } to{ transform: translateY(16px) rotate(4deg); } }
@keyframes fishApproach{
0%{ transform: translateY(0) rotate(-3deg) scale(0.55); opacity:0.2; }
50%{ transform: translateY(12px) rotate(0deg) scale(1.25); opacity:0.9; }
100%{ transform: translateY(0) rotate(3deg) scale(0.55); opacity:0.2; }
}
@media (prefers-reduced-motion: reduce){
.fish-track{ animation: none; }
.fish-body{ animation: none; }
.hero-slide{ transition: opacity 1.2s var(--ease); transform:none !important; }
}
@media (max-width: 640px){ .fish-layer{ opacity:0.6; } }
/* ---------- Ecosystem network line ---------- */
.eco-flow{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; }
.eco-node{
display:flex; flex-direction:column; align-items:center; gap:12px;
padding: 22px 20px; min-width:140px;
}
.eco-node .dot{
width:54px; height:54px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background: radial-gradient(circle at 30% 30%, rgba(41,231,255,0.25), rgba(59,110,246,0.06));
border: 1px solid var(--line-bright);
box-shadow: 0 0 22px rgba(41,231,255,0.25);
font-size:20px;
}
.eco-node span{ font-family:'JetBrains Mono'; font-size:12px; color: var(--text-mid); letter-spacing:0.05em; text-transform:uppercase;}
.eco-arrow{ color: var(--cyan); opacity:0.5; font-size:20px; }
@media (max-width: 900px){ .eco-flow{ flex-direction:column; } .eco-arrow{ transform: rotate(90deg); } }
/* ---------- Timeline ---------- */
.timeline{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; position:relative; }
.timeline::before{
content:''; position:absolute; top:26px; left:6%; right:6%; height:1px;
background: linear-gradient(90deg, transparent, var(--line-bright) 15%, var(--line-bright) 85%, transparent);
}
.tl-step{ position:relative; padding-top: 56px; }
.tl-num{
position:absolute; top:0; left:0; width:52px; height:52px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:'JetBrains Mono'; font-size:13px; color: var(--cyan-soft);
background: var(--navy-mid); border:1px solid var(--line-bright);
box-shadow: 0 0 20px rgba(41,231,255,0.25);
}
.tl-step h4{ font-size:18px; margin-bottom:10px; }
.tl-step p{ font-size:14.5px; }
@media (max-width: 900px){
.timeline{ grid-template-columns:1fr; gap:36px; }
.timeline::before{ display:none; }
}
/* ---------- Grids ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }
.card{ padding: 30px; }
.card .icon{
width:46px; height:46px; border-radius: 12px; margin-bottom:20px;
display:flex; align-items:center; justify-content:center; font-size:20px;
background: linear-gradient(135deg, rgba(41,231,255,0.18), rgba(59,110,246,0.1));
border: 1px solid var(--line-bright);
}
.card h3{ font-size:18px; margin-bottom:10px; font-weight:600; }
.card p{ font-size:14.5px; }
/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:13px; color: var(--text-mid); font-weight:500; }
.field input, .field select, .field textarea{
background: rgba(255,255,255,0.03);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 13px 16px; color: var(--text-hi); font-family:'Inter'; font-size:14.5px;
outline:none; transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{
border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(41,231,255,0.12);
}
.field textarea{ resize: vertical; min-height:110px; font-family:'Inter'; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
/* ---------- Footer ---------- */
footer{ border-top: 1px solid var(--line); padding: 76px 0 30px; background: var(--navy-abyss); }
.footer-top{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; }
.footer-brand p{ margin-top:16px; font-size:14px; max-width:280px; }
.footer-col h5{ font-family:'JetBrains Mono'; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color: var(--text-low); margin-bottom:18px; }
.footer-col a{ display:block; font-size:14.5px; color: var(--text-mid); margin-bottom:12px; transition: color .25s; }
.footer-col a:hover{ color: var(--cyan-soft); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:26px; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ font-size:13px; }
.footer-tag{ font-family:'JetBrains Mono'; font-size:12px; color: var(--cyan-soft); }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }
/* ---------- Products and WhatsApp contact ---------- */
.product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
}
.uae-real-map-panel .map-source-note{
color:#607282;
}
.product-card{
padding:28px;
min-height:250px;
}
.product-icon{
width:52px;
height:52px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
background:linear-gradient(135deg, rgba(41,231,255,0.18), rgba(58,111,246,0.12));
color:var(--cyan-soft);
border:1px solid var(--line-bright);
font-size:23px;
}
.product-card h3{
font-size:18px;
margin-bottom:10px;
font-weight:600;
}
.product-card p{
font-size:14.5px;
}
.product-cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin-top:28px;
padding:30px;
}
.product-cta h3{
font-size:clamp(20px,2vw,28px);
max-width:720px;
}
.product-cta .btn{
flex-shrink:0;
}
.whatsapp-float{
position:fixed;
right:22px;
bottom:22px;
z-index:80;
width:58px;
height:58px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#06120b;
background:#25d366;
border:1px solid rgba(255,255,255,0.35);
box-shadow:0 16px 42px -16px rgba(37,211,102,0.85);
font-size:29px;
transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-float:hover{
transform:translateY(-3px);
box-shadow:0 20px 52px -16px rgba(37,211,102,1);
}
@media (max-width: 980px){
.product-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 700px){
.product-grid{ grid-template-columns:1fr; }
.product-card{ min-height:0; }
.product-cta{ flex-direction:column; align-items:flex-start; padding:24px; }
.product-cta .btn{ width:100%; }
.whatsapp-float{ right:16px; bottom:92px; width:52px; height:52px; font-size:26px; }
}
/* ---------- About company page ---------- */
.nav-links a[aria-current="page"]{
color: var(--cyan-soft);
}
.about-hero{
position:relative;
min-height:720px;
padding:160px 0 90px;
display:flex;
align-items:center;
overflow:hidden;
}
.about-hero::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(180deg, rgba(4,8,16,0.52) 0%, rgba(6,13,28,0.88) 68%, var(--navy-deep) 100%),
radial-gradient(ellipse 850px 520px at 78% 28%, rgba(41,231,255,0.18), transparent 65%),
radial-gradient(ellipse 700px 420px at 16% 18%, rgba(58,111,246,0.2), transparent 64%);
pointer-events:none;
}
.about-hero-grid{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,1.12fr) minmax(360px,0.88fr);
gap:56px;
align-items:center;
}
.about-hero h1{
font-size:clamp(40px,5.2vw,70px);
max-width:760px;
}
.about-hero p{
margin-top:24px;
max-width:620px;
font-size:18px;
}
.about-hero-actions{
display:flex;
gap:16px;
flex-wrap:wrap;
margin-top:36px;
}
.about-hero-panel{
padding:32px;
border-radius:28px;
}
.about-stat{
padding-bottom:26px;
margin-bottom:24px;
border-bottom:1px solid var(--line);
}
.about-stat span{
color:var(--cyan-soft);
font-size:12px;
}
.about-stat strong{
display:block;
margin-top:8px;
font-family:'Space Grotesk', sans-serif;
font-size:64px;
line-height:1;
}
.about-stat-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.about-stat-grid div{
min-height:116px;
padding:18px;
border:1px solid var(--line);
border-radius:18px;
background:rgba(255,255,255,0.035);
}
.about-stat-grid strong{
display:block;
font-family:'Space Grotesk', sans-serif;
font-size:34px;
}
.about-stat-grid span{
display:block;
margin-top:6px;
color:var(--text-mid);
font-size:13.5px;
line-height:1.45;
}
.about-section{
scroll-margin-top:86px;
}
.about-story-card{
max-width:920px;
margin:0 auto;
padding:38px;
border-radius:24px;
}
.about-story-card p + p{
margin-top:16px;
}
.about-timeline{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}
.about-timeline-step{
position:relative;
min-height:250px;
padding:26px;
border:1px solid var(--line);
border-radius:22px;
background:rgba(15,28,54,0.48);
}
.about-timeline-step::before{
content:'';
position:absolute;
top:0;
left:26px;
right:26px;
height:2px;
background:linear-gradient(90deg,var(--cyan),transparent);
}
.about-timeline-step span{
color:var(--cyan-soft);
font-size:12px;
}
.about-timeline-step h3{
margin-top:18px;
margin-bottom:10px;
font-size:20px;
}
.leadership-grid,
.digital-grid{
display:grid;
grid-template-columns:0.9fr 1.1fr;
gap:44px;
align-items:center;
}
.leader-photo-placeholder{
min-height:420px;
border-radius:28px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:var(--text-mid);
text-align:center;
}
.leader-photo-placeholder i{
width:96px;
height:96px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:18px;
color:var(--cyan-soft);
border:1px solid var(--line-bright);
background:rgba(41,231,255,0.08);
font-size:40px;
}
.leader-photo-card{
position:relative;
min-height:420px;
border-radius:28px;
overflow:hidden;
padding:14px;
}
.leader-photo-card::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg, transparent 42%, rgba(4,7,13,0.9) 100%);
z-index:1;
pointer-events:none;
}
.leader-photo-card img{
width:100%;
height:100%;
min-height:392px;
display:block;
object-fit:cover;
object-position:center top;
border-radius:20px;
}
.leader-photo-caption{
position:absolute;
left:28px;
right:28px;
bottom:24px;
z-index:2;
display:flex;
flex-direction:column;
gap:5px;
padding:15px 17px;
border-radius:18px;
border:1px solid rgba(255,255,255,0.26);
background:linear-gradient(135deg, rgba(3,13,27,0.86), rgba(3,26,45,0.7));
box-shadow:0 16px 42px rgba(0,0,0,0.26);
backdrop-filter:blur(14px);
}
.leader-photo-caption strong{
font-family:'Space Grotesk', sans-serif;
font-size:28px;
line-height:1;
color:#fff;
text-shadow:0 2px 18px rgba(0,0,0,0.42);
}
.leader-photo-caption span{
color:#8feeff;
font-size:13px;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
}
.uae-operations-section{
position:relative;
overflow:hidden;
}
.uae-operations-section::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 12% 16%, rgba(41,231,255,0.1), transparent 0 24%, transparent 42%),
radial-gradient(circle at 86% 32%, rgba(245,197,66,0.08), transparent 0 20%, transparent 45%);
pointer-events:none;
}
.uae-operations-section .container{
position:relative;
z-index:1;
}
.uae-operations-intro{
display:grid;
grid-template-columns:minmax(0, 1.25fr) minmax(320px, 0.75fr);
gap:30px;
align-items:end;
padding:38px;
border-radius:28px;
margin-bottom:28px;
}
.uae-operations-intro h2{
max-width:760px;
margin:14px 0 18px;
font-size:clamp(34px, 4vw, 54px);
line-height:1.06;
}
.uae-operations-intro p{
max-width:850px;
margin-top:14px;
color:var(--text);
font-size:16px;
}
.uae-operations-summary{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.uae-operations-summary div{
min-height:112px;
padding:17px;
border-radius:18px;
border:1px solid var(--line);
background:rgba(255,255,255,0.04);
}
.uae-operations-summary strong,
.uae-operations-summary span{
display:block;
}
.uae-operations-summary strong{
font-family:'Space Grotesk', sans-serif;
font-size:32px;
line-height:1;
color:var(--cyan);
}
.uae-operations-summary span{
margin-top:10px;
color:var(--text-low);
font-size:12.5px;
line-height:1.35;
}
.uae-presence-layout{
display:grid;
grid-template-columns:minmax(320px,0.85fr) minmax(0,1.15fr);
gap:28px;
align-items:stretch;
}
.vip-uae-layout{
grid-template-columns:minmax(360px,0.8fr) minmax(0,1.2fr);
}
.uae-map-card{
min-height:560px;
padding:28px;
border-radius:28px;
overflow:hidden;
}
.vip-uae-layout .uae-map-card{
position:sticky;
top:96px;
min-height:0;
align-self:start;
display:flex;
flex-direction:column;
gap:22px;
background:
linear-gradient(180deg, rgba(5,15,32,0.96), rgba(7,28,52,0.92)),
radial-gradient(circle at 70% 36%, rgba(41,231,255,0.18), transparent 0 30%, transparent 58%);
}
.uae-map-copy{
position:relative;
z-index:2;
}
.uae-map-copy h3{
margin:12px 0 10px;
font-size:28px;
line-height:1.15;
}
.uae-map-copy p{
color:var(--text-low);
font-size:14px;
}
.uae-map-orbit{
position:relative;
width:100%;
height:100%;
min-height:500px;
border-radius:24px;
background:
radial-gradient(circle at center, rgba(41,231,255,0.2), transparent 32%),
radial-gradient(circle at 42% 50%, transparent 0 38%, rgba(41,231,255,0.1) 39% 40%, transparent 41%),
radial-gradient(circle at 42% 50%, transparent 0 58%, rgba(58,111,246,0.18) 59% 60%, transparent 61%);
border:1px solid var(--line);
}
.uae-real-map-panel{
height:auto;
min-height:0;
padding:14px;
display:flex;
flex-direction:column;
gap:12px;
background:linear-gradient(180deg, rgba(250,253,255,0.96), rgba(237,247,250,0.94));
border:1px solid rgba(11,159,175,0.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 24px 70px rgba(5,22,38,0.18);
}
.uae-real-map{
height:430px;
min-height:430px;
flex:0 0 auto;
border-radius:18px;
overflow:hidden;
border:1px solid rgba(16,54,80,0.12);
background:#e9f4f6;
z-index:1;
}
.uae-real-map .leaflet-tile-pane{
filter:saturate(0.82) contrast(0.98) brightness(1.05);
}
.uae-real-map .leaflet-control-attribution{
font-size:9px;
}
.fishmarket-map-pin{
width:26px !important;
height:26px !important;
border-radius:50%;
background:#ffffff;
border:2px solid #0b9faf;
box-shadow:0 8px 20px rgba(3,37,55,0.22);
}
.fishmarket-map-pin span{
position:absolute;
inset:5px;
border-radius:50%;
background:linear-gradient(135deg, #0b9faf, #29e7ff);
box-shadow:0 0 0 5px rgba(11,159,175,0.18);
}
.uae-map-legend{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:8px;
}
.uae-map-legend span{
min-height:42px;
padding:9px 10px;
border-radius:12px;
background:#fff;
border:1px solid rgba(16,54,80,0.1);
color:#24455c;
font-size:11.5px;
line-height:1.25;
box-shadow:0 8px 22px rgba(9,48,70,0.06);
}
.uae-map-legend b{
display:block;
color:#07314c;
font-size:12px;
}
.map-source-note{
color:#607282;
font-size:10.5px;
line-height:1.35;
}
.map-point{
position:absolute;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:92px;
min-height:38px;
padding:9px 13px;
border-radius:999px;
background:rgba(6,13,28,0.84);
border:1px solid var(--line-bright);
color:var(--cyan-soft);
font-size:13px;
font-weight:700;
box-shadow:0 0 22px rgba(41,231,255,0.16);
}
.map-point::before{
content:'';
width:8px;
height:8px;
border-radius:50%;
margin-right:8px;
background:var(--cyan);
box-shadow:0 0 12px var(--cyan);
}
.map-point.dubai{ top:18%; right:19%; }
.map-point.sharjah{ top:31%; right:13%; }
.map-point.ajman{ top:42%; right:18%; }
.map-point.abudhabi{ bottom:22%; left:12%; }
.map-point.mushrif{ bottom:34%; left:18%; }
.map-point.alain{ bottom:18%; right:20%; }
.presence-list{
display:grid;
gap:14px;
}
.vip-presence-list{
gap:18px;
}
.presence-card{
padding:22px;
border-radius:18px;
}
.vip-location-card{
display:grid;
grid-template-columns:minmax(220px, 0.82fr) minmax(0, 1.18fr);
gap:0;
padding:0;
overflow:hidden;
border-radius:24px;
}
.vip-location-card.featured-location{
border-color:var(--line-bright);
box-shadow:0 24px 70px rgba(41,231,255,0.12);
}
.waterfront-location-card{
grid-template-columns:minmax(360px, 1fr) minmax(0, 1fr);
}
.location-photo{
min-height:260px;
}
.pending-photo{
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:flex-end;
padding:18px;
background:
linear-gradient(180deg, rgba(5,15,32,0.05) 0%, rgba(5,15,32,0.86) 74%),
radial-gradient(circle at 28% 26%, rgba(41,231,255,0.22), transparent 0 28%, transparent 52%),
linear-gradient(135deg, rgba(13,52,84,0.92), rgba(4,14,30,0.98));
isolation:isolate;
}
.pending-photo img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}
.market-carousel{
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:flex-start;
padding:18px;
isolation:isolate;
overflow:hidden;
background:#061525;
touch-action:pan-y;
}
.market-carousel img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transform:scale(1.035);
transition:opacity 0.9s ease, transform 3.2s ease;
z-index:0;
}
.market-carousel img.active{
opacity:1;
transform:scale(1);
}
.market-carousel::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(4,18,32,0.02) 0%, rgba(4,18,32,0.24) 45%, rgba(4,18,32,0.88) 100%);
z-index:1;
}
.market-carousel::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.08), transparent 42%);
z-index:1;
}
.market-carousel span,
.market-carousel strong{
position:relative;
z-index:2;
}
.market-carousel span{
display:inline-flex;
align-self:flex-start;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,0.92);
border:1px solid rgba(255,255,255,0.34);
color:#0b3150;
font-size:11px;
font-weight:900;
}
.market-carousel strong{
display:block;
width:100%;
margin-top:auto;
color:#fff;
font-size:24px;
line-height:1.08;
text-shadow:0 2px 14px rgba(0,0,0,0.28);
}
.carousel-arrow{
position:absolute;
top:50%;
z-index:3;
width:34px;
height:34px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.24);
background:rgba(4,18,32,0.48);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
transform:translateY(-50%);
cursor:pointer;
opacity:0;
transition:opacity .25s ease, background .25s ease;
}
.market-carousel:hover .carousel-arrow,
.market-carousel:focus-within .carousel-arrow{
opacity:1;
}
.carousel-arrow.prev{ left:12px; }
.carousel-arrow.next{ right:12px; }
.carousel-arrow:hover{
background:rgba(4,18,32,0.78);
}
.carousel-dots{
position:absolute;
z-index:3;
left:18px;
bottom:14px;
display:flex;
gap:6px;
}
.carousel-dots button{
width:7px;
height:7px;
padding:0;
border:0;
border-radius:50%;
background:rgba(255,255,255,0.45);
}
.carousel-dots button.active{
width:18px;
border-radius:999px;
background:#fff;
}
.carousel-counter{
position:absolute;
right:18px;
bottom:11px;
z-index:3;
display:inline-flex;
min-width:44px;
min-height:24px;
align-items:center;
justify-content:center;
padding:5px 8px;
border-radius:999px;
border:1px solid rgba(255,255,255,0.28);
background:rgba(4,18,32,0.62);
color:#fff;
font-size:11px;
font-weight:800;
line-height:1;
}
.waterfront-slider{
min-height:420px;
}
.waterfront-slider img{
object-position:center center;
}
.waterfront-slider > span,
.waterfront-slider > strong{
display:none;
}
.waterfront-slider .carousel-arrow{
opacity:0.96;
width:42px;
height:42px;
background:rgba(4,18,32,0.68);
border-color:rgba(255,255,255,0.36);
}
.waterfront-slider .carousel-dots{
left:18px;
right:74px;
bottom:16px;
max-width:none;
flex-wrap:wrap;
gap:6px;
row-gap:6px;
}
.waterfront-slider .carousel-dots button{
width:9px;
height:9px;
display:block;
background:rgba(255,255,255,0.78);
cursor:pointer;
}
.waterfront-slider .carousel-dots button.active{
width:24px;
background:#fff;
box-shadow:0 0 0 2px rgba(41,231,255,0.32);
}
.waterfront-slider .carousel-counter{
display:none;
}
@media (prefers-reduced-motion: reduce){
.market-carousel img{
transition:none;
transform:none;
}
}
.pending-photo::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(4,18,32,0.04) 0%, rgba(4,18,32,0.28) 44%, rgba(4,18,32,0.86) 100%);
opacity:1;
z-index:-1;
}
.pending-photo::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.08), transparent 42%),
radial-gradient(circle at 70% 34%, rgba(245,197,66,0.16), transparent 0 16%, transparent 38%);
z-index:-1;
}
.pending-photo span,
.pending-photo strong,
.pending-photo em{
position:relative;
z-index:1;
}
.pending-photo span{
display:inline-flex;
align-self:flex-start;
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,255,255,0.34);
color:#0b3150;
font-size:11px;
font-weight:900;
}
.pending-photo strong{
display:block;
width:100%;
margin-top:auto;
color:#fff;
font-size:24px;
line-height:1.08;
text-shadow:0 2px 14px rgba(0,0,0,0.28);
}
.pending-photo em{
display:block;
width:100%;
margin-top:8px;
color:rgba(255,255,255,0.78);
font-style:normal;
font-size:12px;
}
.photo-dubai{
background:
linear-gradient(180deg, rgba(5,15,32,0.05) 0%, rgba(5,15,32,0.86) 74%),
radial-gradient(circle at 28% 24%, rgba(181,138,59,0.28), transparent 0 22%, transparent 46%),
linear-gradient(135deg, #0b4f77, #06233e);
}
.photo-sharjah{
background:
linear-gradient(180deg, rgba(5,15,32,0.05) 0%, rgba(5,15,32,0.86) 74%),
radial-gradient(circle at 76% 22%, rgba(11,159,175,0.3), transparent 0 22%, transparent 48%),
linear-gradient(135deg, #234b6a, #09243a);
}
.photo-ajman{
background:
linear-gradient(180deg, rgba(5,15,32,0.05) 0%, rgba(5,15,32,0.86) 74%),
radial-gradient(circle at 32% 30%, rgba(70,157,174,0.32), transparent 0 24%, transparent 52%),
linear-gradient(135deg, #0f6672, #08263b);
}
.photo-abudhabi{
background:
linear-gradient(180deg, rgba(5,15,32,0.05) 0%, rgba(5,15,32,0.86) 74%),
radial-gradient(circle at 72% 30%, rgba(181,138,59,0.26), transparent 0 24%, transparent 50%),
linear-gradient(135deg, #123b5a, #051b30);
}
.photo-mushrif{
background:
linear-gradient(180deg, rgba(5,15,32,0.05) 0%, rgba(5,15,32,0.86) 74%),
radial-gradient(circle at 30% 28%, rgba(41,231,255,0.24), transparent 0 24%, transparent 52%),
linear-gradient(135deg, #173f60, #061f37);
}
.photo-alain{
background:
linear-gradient(180deg, rgba(5,15,32,0.05) 0%, rgba(5,15,32,0.86) 74%),
radial-gradient(circle at 28% 24%, rgba(117,171,145,0.34), transparent 0 25%, transparent 52%),
linear-gradient(135deg, #315f59, #09283a);
}
.image-credit{
margin-top:14px;
color:var(--text-low);
font-size:11.5px;
line-height:1.45;
}
.location-content{
padding:26px;
}
.location-content > span{
display:inline-flex;
min-height:30px;
align-items:center;
padding:7px 10px;
border-radius:999px;
color:var(--gold);
background:rgba(245,197,66,0.12);
border:1px solid rgba(245,197,66,0.18);
font-size:11.5px;
font-weight:900;
}
.location-content h3{
margin:12px 0 12px;
font-size:24px;
}
.location-content p{
color:var(--text);
line-height:1.55;
}
.location-content ul{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:8px;
margin:16px 0 0;
padding:0;
list-style:none;
}
.location-content li{
min-height:42px;
padding:10px 12px;
border-radius:13px;
color:var(--text-low);
background:rgba(255,255,255,0.045);
border:1px solid var(--line);
font-size:12.5px;
line-height:1.35;
}
.waterfront-location-card .location-content ul{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:7px;
margin-top:13px;
}
.waterfront-location-card .location-content li{
min-height:0;
padding:9px 10px;
font-size:12px;
line-height:1.28;
}
.presence-card h3{
font-size:19px;
margin-bottom:8px;
}
.presence-card p{
font-size:14.5px;
}
.company-card-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}
.company-card{
min-height:180px;
padding:26px;
border-radius:20px;
}
.company-card h3{
font-size:19px;
margin-bottom:10px;
}
.company-card.featured{
background:linear-gradient(135deg, rgba(41,231,255,0.18), rgba(58,111,246,0.12));
border-color:var(--line-bright);
}
.sourcing-capability-grid{
display:grid;
grid-template-columns:minmax(360px, 0.82fr) minmax(420px, 1.18fr);
gap:24px;
align-items:stretch;
margin-bottom:24px;
}
.sourcing-headline-card{
padding:30px;
border-radius:22px;
display:flex;
flex-direction:column;
gap:16px;
overflow:hidden;
}
.sourcing-kicker{
display:inline-flex;
width:max-content;
max-width:100%;
min-height:34px;
align-items:center;
padding:8px 12px;
border-radius:999px;
color:var(--gold);
background:rgba(245,197,66,0.12);
border:1px solid rgba(245,197,66,0.22);
font-size:12px;
font-weight:800;
line-height:1.2;
}
.sourcing-showcase{
position:relative;
min-height:380px;
margin-bottom:34px;
padding:40px;
border-radius:26px;
overflow:hidden;
display:grid;
grid-template-columns:minmax(340px, 0.9fr) minmax(360px, 1.1fr);
gap:30px;
align-items:center;
background:
radial-gradient(circle at 78% 42%, rgba(41,231,255,0.22), transparent 0 18%, transparent 42%),
radial-gradient(circle at 74% 44%, rgba(58,111,246,0.24), transparent 0 28%, transparent 56%),
linear-gradient(135deg, rgba(5,15,32,0.96), rgba(6,25,47,0.9));
}
.sourcing-showcase::before{
content:"";
position:absolute;
inset:0 0 0 44%;
background:
linear-gradient(110deg, transparent 15%, rgba(41,231,255,0.14) 16%, transparent 17% 32%, rgba(41,231,255,0.12) 33%, transparent 34% 50%, rgba(245,197,66,0.12) 51%, transparent 52%),
radial-gradient(circle, rgba(255,255,255,0.08) 0 1px, transparent 1.5px);
background-size:100% 100%, 28px 28px;
opacity:0.85;
}
.sourcing-showcase-copy{
position:relative;
z-index:2;
}
.sourcing-showcase-copy h3{
margin:20px 0 16px;
max-width:560px;
font-size:clamp(34px, 4.6vw, 58px);
line-height:1.05;
color:var(--text-hi);
}
.sourcing-showcase-copy h3::first-line{
color:var(--text-hi);
}
.sourcing-showcase-copy p{
max-width:540px;
color:var(--text);
font-size:17px;
}
.sourcing-showcase-stats{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:14px;
margin-top:30px;
}
.sourcing-showcase-stats div{
min-height:96px;
padding:16px;
border-radius:18px;
border:1px solid rgba(41,231,255,0.18);
background:rgba(255,255,255,0.045);
}
.sourcing-showcase-stats i{
color:var(--cyan);
font-size:20px;
margin-bottom:10px;
}
.sourcing-showcase-stats b,
.sourcing-showcase-stats span{
display:block;
}
.sourcing-showcase-stats b{
color:var(--text-hi);
font-size:16px;
}
.sourcing-showcase-stats span{
margin-top:4px;
color:var(--text-low);
font-size:12px;
line-height:1.35;
}
.sourcing-globe{
position:relative;
z-index:1;
min-height:320px;
border-radius:50%;
background:
radial-gradient(circle at 42% 42%, rgba(255,255,255,0.12), transparent 0 6%, transparent 100%),
radial-gradient(circle at 48% 50%, rgba(41,231,255,0.22), transparent 0 44%, transparent 45%),
radial-gradient(circle at 50% 50%, rgba(7,45,78,0.75), rgba(3,12,26,0.06) 68%);
box-shadow:inset 0 0 70px rgba(41,231,255,0.16), 0 0 90px rgba(41,231,255,0.16);
}
.sourcing-globe::before,
.sourcing-globe::after{
content:"";
position:absolute;
inset:11%;
border-radius:50%;
border:1px solid rgba(41,231,255,0.18);
}
.sourcing-globe::after{
inset:22%;
border-style:dashed;
opacity:0.7;
}
.route-dot{
position:absolute;
width:11px;
height:11px;
border-radius:50%;
background:var(--cyan);
box-shadow:0 0 18px var(--cyan);
}
.dot-1{ top:24%; left:34%; }
.dot-2{ top:38%; left:58%; }
.dot-3{ top:58%; left:44%; }
.dot-4{ top:44%; right:22%; }
.route-line{
position:absolute;
height:1px;
background:linear-gradient(90deg, transparent, rgba(41,231,255,0.8), transparent);
transform-origin:left center;
}
.line-1{ top:31%; left:36%; width:210px; transform:rotate(15deg); }
.line-2{ top:44%; left:52%; width:170px; transform:rotate(-24deg); }
.line-3{ top:60%; left:44%; width:230px; transform:rotate(-12deg); }
.sourcing-network-title{
margin:6px auto 24px;
max-width:900px;
text-align:center;
}
.sourcing-network-title span{
display:inline-flex;
align-items:center;
gap:12px;
color:var(--cyan);
font-size:13px;
font-weight:800;
text-transform:uppercase;
}
.sourcing-network-title h3{
margin-top:12px;
font-size:clamp(24px, 3vw, 36px);
line-height:1.16;
color:var(--text-hi);
}
.sourcing-capacity-banner{
margin:0 auto 28px;
max-width:980px;
padding:28px;
border-radius:24px;
display:grid;
grid-template-columns:auto 1fr auto;
gap:18px;
align-items:center;
background:
linear-gradient(135deg, rgba(6,21,37,0.96), rgba(8,52,75,0.92)),
radial-gradient(circle at 78% 34%, rgba(41,231,255,0.2), transparent 0 28%, transparent 55%);
border-color:rgba(41,231,255,0.22);
}
.sourcing-capacity-banner span{
color:#9ce9ef;
font-size:13px;
font-weight:800;
}
.sourcing-capacity-banner strong{
color:#fff;
font-family:'Inter', sans-serif;
font-size:clamp(40px, 5vw, 72px);
line-height:0.95;
}
.sourcing-capacity-banner p{
max-width:290px;
color:rgba(255,255,255,0.82);
font-size:16px;
line-height:1.35;
}
.sourcing-market-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:16px;
margin-bottom:34px;
}
.sourcing-market-card{
position:relative;
min-height:180px;
padding:18px;
border-radius:20px;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:flex-end;
border:1px solid rgba(41,231,255,0.16);
background:
linear-gradient(180deg, rgba(12,46,76,0.36), rgba(5,15,32,0.94)),
radial-gradient(circle at 72% 18%, rgba(41,231,255,0.28), transparent 0 24%, transparent 45%);
}
.sourcing-market-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(255,255,255,0.08), transparent 40%);
opacity:0.8;
}
.sourcing-market-card span,
.sourcing-market-card h4,
.sourcing-market-card p{
position:relative;
z-index:1;
}
.sourcing-market-card span{
position:absolute;
top:14px;
left:14px;
display:inline-flex;
min-width:38px;
min-height:30px;
align-items:center;
justify-content:center;
border-radius:9px;
color:#06111f;
background:linear-gradient(135deg, var(--cyan), var(--gold));
font-size:12px;
font-weight:900;
}
.sourcing-market-card h4{
font-size:20px;
color:var(--text-hi);
margin-bottom:7px;
}
.sourcing-market-card p{
color:rgba(235,244,255,0.82);
font-size:13px;
line-height:1.42;
}
.sourcing-market-card.highlight{
border-color:var(--line-bright);
box-shadow:0 18px 50px rgba(41,231,255,0.12);
}
.sourcing-market-card.hub{
background:
linear-gradient(180deg, rgba(245,197,66,0.16), rgba(5,15,32,0.94)),
radial-gradient(circle at 72% 18%, rgba(245,197,66,0.26), transparent 0 24%, transparent 45%);
}
.sourcing-headline-card h3{
margin:0;
}
.sourcing-headline-card h3 span{
display:block;
margin-top:8px;
max-width:380px;
font-size:26px;
line-height:1.12;
color:var(--text-hi);
}
.sourcing-headline-card strong{
display:block;
font-family:'Space Grotesk', sans-serif;
font-size:clamp(46px, 5.6vw, 72px);
line-height:0.96;
color:var(--cyan);
overflow-wrap:normal;
white-space:nowrap;
}
.sourcing-headline-card p{
margin:0;
color:var(--text);
}
.sourcing-headline-card small{
color:var(--text-low);
font-size:12.5px;
line-height:1.55;
}
.sourcing-totals{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.sourcing-totals div,
.sourcing-country-metrics div{
min-height:84px;
padding:16px;
border-radius:18px;
border:1px solid var(--line);
background:rgba(255,255,255,0.045);
}
.sourcing-totals b,
.sourcing-country-metrics b{
display:block;
font-family:'Space Grotesk', sans-serif;
font-size:28px;
color:var(--text-hi);
line-height:1;
margin-bottom:8px;
}
.sourcing-totals span,
.sourcing-country-metrics span{
display:block;
color:var(--text-low);
font-size:12.5px;
line-height:1.35;
}
.sourcing-network{
min-height:100%;
padding:30px;
border-radius:22px;
display:grid;
grid-template-columns:148px 1fr;
gap:24px;
align-items:center;
overflow:hidden;
}
.sourcing-core{
width:132px;
height:132px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-family:'Space Grotesk', sans-serif;
font-size:36px;
font-weight:700;
color:#031019;
background:linear-gradient(135deg,var(--cyan),var(--blue));
box-shadow:0 0 50px rgba(41,231,255,0.28);
}
.sourcing-chips{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.country-selector button{
appearance:none;
border:1px solid var(--line);
background:rgba(255,255,255,0.045);
color:var(--text-hi);
min-height:42px;
padding:11px 14px;
border-radius:999px;
font:700 13.5px/1 'Inter', sans-serif;
cursor:pointer;
transition:0.25s ease;
}
.country-selector button:hover,
.country-selector button.active{
border-color:var(--line-bright);
color:#031019;
background:linear-gradient(135deg, var(--cyan), var(--blue));
box-shadow:0 14px 35px rgba(41,231,255,0.16);
}
.sourcing-detail-panel{
padding:34px;
border-radius:22px;
}
.sourcing-detail-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
padding-bottom:24px;
border-bottom:1px solid var(--line);
}
.sourcing-detail-top h3{
margin-top:8px;
font-size:34px;
}
.sourcing-country-metrics{
display:grid;
grid-template-columns:repeat(2, minmax(130px, 1fr));
gap:12px;
min-width:min(390px, 100%);
}
.sourcing-product-list{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
gap:14px;
margin-top:22px;
}
.sourcing-product-list article{
min-height:178px;
padding:20px;
border-radius:20px;
border:1px solid var(--line);
background:rgba(255,255,255,0.04);
}
.sourcing-product-list span{
display:inline-flex;
align-items:center;
min-height:30px;
padding:7px 10px;
border-radius:999px;
background:rgba(245,197,66,0.14);
color:var(--gold);
font-size:12px;
font-weight:800;
margin-bottom:12px;
}
.sourcing-product-list strong{
display:block;
font-size:18px;
color:var(--text-hi);
margin-bottom:9px;
}
.sourcing-product-list p{
color:var(--text-low);
font-size:14px;
line-height:1.55;
}
.sourcing-note{
margin-top:18px;
padding:16px 18px;
border-radius:18px;
color:var(--text);
background:rgba(41,231,255,0.08);
border:1px solid rgba(41,231,255,0.18);
font-size:14px;
line-height:1.55;
}
.sourcing-breakdown{
margin-top:34px;
}
.section-head.compact{
max-width:760px;
margin-bottom:24px;
}
.section-head.compact h3{
font-size:30px;
line-height:1.16;
}
.section-head.compact p{
margin-top:12px;
}
.sourcing-country-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:16px;
}
.sourcing-country-card{
min-height:100%;
padding:24px;
border-radius:20px;
}
.sourcing-country-card.highlight{
border-color:var(--line-bright);
background:linear-gradient(135deg, rgba(41,231,255,0.14), rgba(245,197,66,0.08));
}
.sourcing-country-card div{
margin-bottom:14px;
}
.sourcing-country-card span{
display:inline-flex;
min-height:28px;
align-items:center;
padding:6px 10px;
border-radius:999px;
background:rgba(255,255,255,0.06);
color:var(--gold);
font-size:11.5px;
font-weight:800;
}
.sourcing-country-card h4{
margin-top:10px;
font-size:24px;
color:var(--text-hi);
}
.sourcing-country-card ul{
display:grid;
gap:9px;
margin:0;
padding-left:18px;
}
.sourcing-country-card li,
.sourcing-country-card p{
color:var(--text-low);
font-size:13.5px;
line-height:1.5;
}
.sourcing-country-card li b,
.sourcing-country-card p b{
color:var(--text);
}
.sourcing-country-card p{
margin-top:16px;
padding-top:14px;
border-top:1px solid var(--line);
}
.supplier-partnership-card{
margin-top:24px;
padding:34px;
border-radius:22px;
display:flex;
align-items:center;
justify-content:space-between;
gap:28px;
}
.supplier-partnership-card h3{
font-size:26px;
margin:8px 0 12px;
}
.supplier-partnership-card p{
color:var(--text-low);
max-width:820px;
}
.sourcing-chips span,
.why-item{
display:inline-flex;
align-items:center;
min-height:46px;
padding:12px 16px;
border-radius:999px;
color:var(--text-hi);
border:1px solid var(--line);
background:rgba(255,255,255,0.035);
font-size:14px;
}
.why-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
.why-item{
border-radius:16px;
}
.trust-card{
padding:32px;
border-radius:24px;
}
.trust-card h3{
font-size:24px;
margin-bottom:14px;
}
.trust-note{
margin-top:18px;
padding:16px;
border-radius:14px;
border:1px solid var(--line-bright);
color:var(--cyan-soft);
font-size:13.5px;
line-height:1.55;
background:rgba(41,231,255,0.06);
}
.final-about-cta{
padding:42px;
border-radius:28px;
display:flex;
gap:28px;
align-items:center;
justify-content:space-between;
}
.final-about-cta h2{
font-size:clamp(28px,3.4vw,44px);
max-width:760px;
}
.final-about-cta p{
margin-top:16px;
max-width:760px;
}
@media (max-width: 980px){
.about-hero-grid,
.leadership-grid,
.digital-grid,
.uae-presence-layout{
grid-template-columns:1fr;
}
.about-timeline,
.company-card-grid,
.why-grid{
grid-template-columns:1fr 1fr;
}
.about-hero{ min-height:auto; padding:130px 0 70px; }
.uae-map-card{ min-height:420px; }
.uae-map-orbit{ min-height:360px; }
}
@media (max-width: 680px){
.about-hero{ padding:112px 0 58px; }
.about-hero h1{ font-size:clamp(34px,10vw,42px); }
.about-hero p{ font-size:16px; }
.about-hero-actions{ flex-direction:column; }
.about-hero-actions .btn{ width:100%; }
.about-hero-panel,
.about-story-card,
.trust-card,
.final-about-cta,
.sourcing-network{ padding:22px; border-radius:20px; }
.about-stat-grid,
.about-timeline,
.company-card-grid,
.why-grid{
grid-template-columns:1fr;
}
.leadership-grid,
.digital-grid{ gap:26px; }
.leader-photo-placeholder{ min-height:280px; }
.uae-map-card{ min-height:320px; padding:18px; }
.uae-map-orbit{ min-height:280px; }
.map-point{ min-width:74px; min-height:34px; padding:8px 10px; font-size:11.5px; }
.map-point.dubai{ top:14%; right:10%; }
.map-point.sharjah{ top:30%; right:6%; }
.map-point.ajman{ top:45%; right:11%; }
.map-point.abudhabi{ bottom:22%; left:7%; }
.map-point.alain{ bottom:14%; right:10%; }
.sourcing-network{ grid-template-columns:1fr; }
.sourcing-core{ width:116px; height:116px; font-size:28px; }
.final-about-cta{ flex-direction:column; align-items:flex-start; }
.final-about-cta .btn{ width:100%; }
}
/* ---------- App Download CTA ---------- */
.download-btn-row{ display:flex; gap:18px; margin-top:30px; flex-wrap:wrap; align-items:flex-start; }
/* Premium icon-only platform download buttons (direct APK / IPA — no store redirects) */
.app-icon-btn{
display:inline-flex; align-items:center; justify-content:center;
width:66px; height:66px; border-radius: 20px;
background: rgba(255,255,255,0.03); border:1px solid var(--line);
backdrop-filter: blur(6px); transition: all .35s var(--ease);
position:relative;
}
.app-icon-btn img{ width:28px; height:28px; display:block; }
.app-icon-btn:hover{
transform: translateY(-4px);
border-color: var(--line-bright);
background: rgba(41,231,255,0.08);
box-shadow: 0 14px 34px -10px rgba(41,231,255,0.5);
}
.app-icon-btn.app-icon-btn-primary{
background: linear-gradient(135deg, var(--cyan), var(--blue));
border-color: transparent;
box-shadow: 0 0 0 1px rgba(41,231,255,0.4), 0 8px 30px -6px rgba(41,231,255,0.45);
}
.app-icon-btn.app-icon-btn-primary img{ filter: brightness(0) saturate(100%); }
.app-icon-btn.app-icon-btn-primary:hover{
box-shadow: 0 0 0 1px rgba(41,231,255,.6), 0 14px 36px -6px rgba(41,231,255,.6);
}
.app-icon-btn-label{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--text-low); text-align:center; margin-top:8px; }
.app-icon-btn-wrap{ display:flex; flex-direction:column; align-items:center; }
.app-download-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:420px; }
.phone-float{
position:relative; width:74%; max-width:300px;
animation: phoneFloat 6s ease-in-out infinite;
}
.phone-float img{ width:100%; height:auto; display:block; }
.phone-float-main{ position:relative; z-index:1; filter: drop-shadow(0 40px 90px rgba(41,231,255,0.3)); }
.phone-float-glow{
position:absolute; inset:8% 14%; z-index:0;
filter: blur(40px) saturate(140%); opacity:0.5;
animation-delay: -3s;
}
@keyframes phoneFloat{
0%, 100%{ transform: translateY(0) rotate(-1.5deg); }
50%{ transform: translateY(-18px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce){
.phone-float{ animation:none; }
}
@media (max-width:900px){
.app-download-visual{ min-height:280px; margin-top:12px; }
.phone-float{ max-width:220px; }
}
/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
/* ---------- Legal pages ---------- */
.legal p, .legal li{ font-size:15px; color: var(--text-mid); margin-bottom:12px; }
.legal h3{ font-size:20px; margin-top:40px; margin-bottom:14px; color: var(--text-hi); }
.legal ul{ padding-left:20px; }
/* ---------- misc ---------- */
.badge{
display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
border:1px solid var(--line-bright); font-family:'JetBrains Mono'; font-size:12.5px; color: var(--cyan-soft);
background: rgba(41,231,255,0.05);
}
.split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items: stretch; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
img.cover{ width:100%; height:100%; object-fit:cover; display:block; }
/* ===========================================================
AMBIENT BACKGROUND SYSTEM (fixed, behind all content)
=========================================================== */
.ambient-bg{
position: fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
background: var(--navy-deep);
}
.ambient-bg .layer-grid{
position:absolute; inset:0;
background-image:
linear-gradient(rgba(127,231,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(127,231,255,0.05) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 40%, transparent 90%);
opacity: 0.6;
}
.ambient-bg .layer-wave{
position:absolute; left:-10%; width:120%; height:420px;
background: radial-gradient(ellipse at 50% 100%, rgba(41,231,255,0.10), transparent 70%);
filter: blur(6px);
animation: waveDrift 26s ease-in-out infinite alternate;
}
.ambient-bg .wave1{ top: 4%; animation-duration: 30s; }
.ambient-bg .wave2{ top: 42%; animation-duration: 38s; opacity:0.7; }
.ambient-bg .wave3{ top: 78%; animation-duration: 34s; opacity:0.5; }
@keyframes waveDrift{
0%{ transform: translateX(-4%) translateY(0); }
100%{ transform: translateX(4%) translateY(20px); }
}
.ambient-bg .layer-beam{
position:absolute; width:2px; height:60%; top:-10%;
background: linear-gradient(180deg, transparent, rgba(41,231,255,0.22), transparent);
filter: blur(1px);
animation: beamFade 14s ease-in-out infinite;
}
.ambient-bg .beam1{ left:18%; animation-delay: 0s; }
.ambient-bg .beam2{ left:62%; animation-delay: 5s; }
.ambient-bg .beam3{ left:84%; animation-delay: 9s; }
@keyframes beamFade{
0%, 100%{ opacity:0; }
50%{ opacity:1; }
}
.ambient-bg canvas.ambient-particles{ position:absolute; inset:0; opacity:0.7; }
@media (prefers-reduced-motion: reduce){
.ambient-bg .layer-wave, .ambient-bg .layer-beam{ animation: none; }
}
/* ===========================================================
SCROLL SPY NAV STATE
=========================================================== */
.nav-links a{ cursor:pointer; }
/* ===========================================================
LEGAL MODAL
=========================================================== */
.modal-overlay{
position: fixed; inset:0; z-index: 2000;
background: rgba(4,7,13,0.75); backdrop-filter: blur(6px);
display:flex; align-items:center; justify-content:center;
opacity:0; pointer-events:none; transition: opacity .3s var(--ease);
padding: 40px 20px;
}
.modal-overlay.open{ opacity:1; pointer-events:all; }
.modal-box{
max-width: 780px; width:100%; max-height: 82vh; overflow-y:auto;
padding: 44px; border-radius: 24px;
transform: translateY(16px); transition: transform .35s var(--ease);
}
.modal-overlay.open .modal-box{ transform: translateY(0); }
.modal-close{
position: sticky; top:0; float:right; margin-top:-10px;
background: rgba(255,255,255,0.05); border:1px solid var(--line);
color: var(--text-hi); width:34px; height:34px; border-radius:50%;
cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ border-color: var(--line-bright); color: var(--cyan-soft); }
.modal-box::-webkit-scrollbar{ width:6px; }
.modal-box::-webkit-scrollbar-thumb{ background: var(--line-bright); border-radius:6px; }
/* ===========================================================
MOBILE-ONLY RESPONSIVE OVERHAUL (≤768px)
Scope: everything below only fires under max-width queries.
Desktop styles above are completely untouched.
Goal: compact spacing, one consistent type scale, equal
card padding/radius, consistent buttons, no dead whitespace.
=========================================================== */
@media (max-width: 768px){
/* ---------- Base rhythm ---------- */
.container{ padding: 0 20px; }
section{ padding: 52px 0; }
/* ---------- Consistent type scale (overrides inline sizes) ---------- */
section h2, section h2[style], #app-heading, #company-info-heading{
font-size: clamp(22px, 6.4vw, 28px) !important;
line-height: 1.22 !important;
}
h3, .card h3, #about h3[style]{
font-size: 17px !important;
line-height: 1.32 !important;
font-weight: 600 !important;
margin-bottom: 8px !important;
}
h4, .tl-step h4{ font-size: 16px !important; margin-bottom: 6px !important; }
p, .section-head p, .card p{
font-size: 14.5px !important;
line-height: 1.6 !important;
}
.eyebrow{ font-size: 11px !important; margin-bottom: 12px !important; }
.badge{ font-size: 11.5px !important; padding: 7px 14px !important; }
/* ---------- Section headers ---------- */
.section-head{ margin-bottom: 30px !important; max-width: 100% !important; }
.section-head p{ margin-top: 8px !important; }
/* ---------- Buttons: one consistent system ---------- */
.btn{
min-height: 48px;
padding: 0 22px !important;
font-size: 14px !important;
border-radius: 999px;
line-height: 1;
}
.btn-sm{ min-height: 40px; padding: 0 18px !important; font-size: 13px !important; }
/* ---------- Grids: tighter, always single column below 640 handled already ---------- */
.grid-2, .grid-3, .grid-4{ gap: 14px !important; }
.split{ gap: 22px !important; }
/* ---------- Cards: equal padding / radius / spacing everywhere ---------- */
.card,
.glass.card,
#about .glass[style],
#company-info .glass.card[style]{
padding: 22px !important;
border-radius: 18px !important;
}
.card .icon{
width: 40px !important; height: 40px !important;
font-size: 17px !important;
border-radius: 10px !important;
margin-bottom: 12px !important;
}
#about h3[style]{ margin-top: 0 !important; }
/* Contact form + device mock frames get the same rhythm as cards */
#contact form.glass{ padding: 22px !important; border-radius: 18px !important; }
#contact .split{ align-items: stretch !important; }
/* ---------- Ecosystem flow ---------- */
.eco-node{ padding: 8px 6px !important; min-width: auto !important; gap: 8px !important; }
.eco-node .dot{ width: 44px !important; height: 44px !important; font-size: 17px !important; }
.eco-node span{ font-size: 10.5px !important; }
#ecosystem .glass[style]{ padding: 26px 16px !important; border-radius: 18px !important; }
/* ---------- Timeline ---------- */
.timeline{ gap: 22px !important; }
.tl-step{ padding-top: 42px !important; }
.tl-num{ width: 38px !important; height: 38px !important; font-size: 12px !important; }
/* ---------- Wholesalers / Retailers device frames ---------- */
#wholesalers .glass[style*="520px"],
#retailers .glass[style*="520px"]{
width: 220px !important;
height: 400px !important;
margin: 0 auto !important;
}
/* ---------- App download section ---------- */
.app-download-visual{ min-height: 220px !important; margin-top: 4px !important; }
.phone-float{ max-width: 190px !important; }
.download-btn-row{ flex-direction: column !important; gap: 10px !important; margin-top: 22px !important; }
.download-btn-row .btn{ width: 100% !important; }
#app .split > div[style*="grid"]{ gap: 8px !important; margin-top: 18px !important; }
/* ---------- Footer ---------- */
footer{ padding: 40px 0 20px !important; }
.footer-top{ gap: 26px !important; padding-bottom: 26px !important; }
.footer-brand p{ margin-top: 10px !important; font-size: 13.5px !important; }
.footer-col h5{ margin-bottom: 12px !important; }
.footer-col a{ margin-bottom: 9px !important; font-size: 14px !important; }
/* ---------- Legal pages ---------- */
.legal h3{ font-size: 17px !important; margin-top: 28px !important; margin-bottom: 10px !important; }
.legal p, .legal li{ font-size: 14.5px !important; margin-bottom: 10px !important; }
/* ---------- Global overflow safety ---------- */
h1, h2, h3, h4, p{ overflow-wrap: anywhere; }
img{ max-width: 100%; }
}
/* ===========================================================
MOBILE-ONLY: small phones (≤480px, incl. 320px)
=========================================================== */
@media (max-width: 480px){
.container{ padding: 0 16px; }
section{ padding: 44px 0; }
section h2, section h2[style], #app-heading, #company-info-heading{
font-size: clamp(21px, 7vw, 25px) !important;
}
h3, .card h3, #about h3[style]{ font-size: 16px !important; }
p, .section-head p, .card p{ font-size: 14px !important; }
.card,
.glass.card,
#about .glass[style],
#company-info .glass.card[style]{ padding: 18px !important; }
#contact form.glass{ padding: 18px !important; }
.form-grid{ gap: 12px !important; }
.field input, .field select, .field textarea{ padding: 11px 14px !important; font-size: 14px !important; }
.btn{ padding: 0 18px !important; font-size: 13.5px !important; min-height: 46px; }
#wholesalers .glass[style*="520px"],
#retailers .glass[style*="520px"]{ width: 180px !important; height: 340px !important; }
.phone-float{ max-width: 160px !important; }
.app-download-visual{ min-height: 180px !important; }
.eco-node .dot{ width: 40px !important; height: 40px !important; font-size: 15px !important; }
.brand{ min-height:42px !important; gap:9px !important; padding:5px 10px 5px 6px !important; }
.brand-name{ font-size: 15.5px !important; letter-spacing:0.025em !important; }
.brand img{ width: 34px !important; height: 34px !important; }
}
/* ===========================================================
MOBILE HERO (≤768px)
Single source of truth, no !important needed: the desktop hero
used position:absolute crossfade inside a fixed viewport-height
box, which is what forced overlap and fixed heights on small
screens. Below that, slides go to normal in-flow block (toggled
by the existing .active class from main.js) and the hero height
becomes auto, driven only by its own content and padding.
.hero-heading / .hero-copy / .hero-cta-row (defined above, near
the desktop hero rules) already scale fluidly via clamp() across
320–768px+, so this block only needs to change *layout mode*,
not repeat font-size math at every breakpoint.
=========================================================== */
@media (max-width: 768px){
#home.page-hero{
height: auto;
min-height: auto;
padding: 92px 0 88px;
display: block;
}
.hero-content-wrap{
padding: 0 20px;
min-height: auto;
height: auto;
}
.hero-slide-content{
position: static;
opacity: 1;
transform: none;
pointer-events: auto;
padding-top: 0;
display: none;
}
.hero-slide-content.active{ display: flex; }
.hero-slide-content .eyebrow{ margin-bottom: 16px; }
/* Arrows + dots: one control bar pinned to the bottom of the
(now content-sized) hero, never over the text. */
.hero-arrow{
top: auto;
bottom: 20px;
transform: none;
width: 44px; height: 44px; font-size: 18px;
}
.hero-arrow-left{ left: 20px; }
.hero-arrow-right{ right: 20px; }
.hero-dots{ bottom: 34px; gap: 8px; }
.hero-dot{ width: 7px; height: 7px; }
.hero-dot.active{ width: 22px; }
.hero-slide{ background-size: cover; background-position: center; }
}
/* ===========================================================
HERO SLIDER — RESPONSIVE OVERHAUL (tablet + mobile only)
Everything above this block is the existing desktop design
and is left completely untouched. Rules below only ever fire
inside their own max-width queries, so >991px is pixel-perfect
as before.
=========================================================== */
/* ---------- 1. Hide prev/next arrows on tablet + mobile ----------
Placed last in the file so it wins the cascade over the earlier
.hero-arrow rules at this same specificity — no !important
needed. Arrows are position:absolute, so display:none leaves
no gap in the layout. Desktop (>991px) keeps the arrows exactly
as they are. */
@media (max-width: 991px){
.hero-arrow{ display: none; }
}
/* ---------- 2 & 6. Center hero content + buttons ---------- */
@media (max-width: 768px){
#home .hero-slide-content{
text-align: center;
}
/* the CTA row is the last direct child (eyebrow, h1, p, CTA row) */
#home .hero-slide-content > div:last-child{
justify-content: center;
width: 100%;
}
}
/* ---------- 3, 4 & 6. Fluid type scale, spacing, equal buttons ----------
Uses clamp() so sizing stays smooth across every phone width
(320px–768px) instead of jumping at a single breakpoint, and
overrides the inline font-size/margin attributes in the markup
(hence the !important — unavoidable since they're set inline). */
@media (max-width: 768px){
#home.page-hero{
padding: clamp(64px, 14vw, 80px) 0 clamp(48px, 10vw, 64px);
}
.hero-content-wrap{ padding: 0 22px; }
#home .hero-slide-content .eyebrow{
font-size: clamp(13px, 3vw, 14px) !important;
justify-content: center;
margin-bottom: 14px;
}
#home .hero-slide-content h1[style]{
font-size: clamp(36px, 8vw, 42px) !important;
line-height: 1.18 !important;
}
#home .hero-slide-content p[style]{
font-size: clamp(16px, 4vw, 18px) !important;
margin-top: 14px !important;
max-width: 440px !important;
margin-left: auto !important;
margin-right: auto !important;
}
#home .hero-slide-content > div:last-child{
margin-top: 26px !important;
gap: 14px !important;
}
/* equal width / height CTA buttons, wraps to a column if needed */
#home .hero-slide-content > div:last-child .btn{
flex: 1 1 180px;
max-width: 240px;
min-height: 50px;
}
.hero-dots{ bottom: 22px; }
/* keep the subject (not the empty sky/water) in frame on tall
narrow screens */
.hero-slide{ background-position: center top; }
}
@media (max-width: 576px){
#home .hero-slide-content > div:last-child{
flex-direction: column;
align-items: center;
}
#home .hero-slide-content > div:last-child .btn{
width: 100%;
max-width: 280px;
flex: none;
}
}
/* ===========================================================
ABOUT PAGE POLISH PASS
Keeps the company page visible, compact, and premium across
mobile and desktop. This intentionally wins the cascade.
=========================================================== */
.about-page .reveal{
opacity:1;
transform:none;
}
.about-page section{
padding:86px 0;
}
.about-page .section-head{
margin-bottom:38px;
}
.about-page .section-head h2{
max-width:850px;
margin-left:auto;
margin-right:auto;
}
.about-page .section-head p{
max-width:780px;
margin-left:auto;
margin-right:auto;
}
.about-page .about-hero{
min-height:auto;
padding:142px 0 78px;
}
.about-page .about-hero::after{
content:'';
position:absolute;
left:50%;
bottom:0;
width:min(980px,88vw);
height:1px;
transform:translateX(-50%);
background:linear-gradient(90deg, transparent, var(--line-bright), transparent);
}
.about-page .about-hero-grid{
gap:38px;
}
.about-page .about-hero h1{
font-size:clamp(42px,4.7vw,64px);
line-height:1.02;
}
.about-page .about-hero p{
font-size:17px;
line-height:1.62;
max-width:660px;
}
.about-hero-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:24px;
}
.about-hero-tags span{
padding:9px 13px;
border-radius:999px;
border:1px solid var(--line);
color:var(--cyan-soft);
background:rgba(41,231,255,0.055);
font-size:12.5px;
font-weight:700;
}
.about-page .about-hero-panel{
padding:24px;
border-radius:22px;
}
.about-page .about-stat{
padding-bottom:20px;
margin-bottom:18px;
}
.about-page .about-stat strong{
font-size:52px;
}
.about-page .about-stat-grid{
gap:10px;
}
.about-page .about-stat-grid div{
min-height:96px;
padding:15px;
border-radius:15px;
}
.about-page .about-stat-grid strong{
font-size:30px;
}
.about-page .about-story-card{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
padding:30px;
}
.about-page .about-story-card h3{
font-size:21px;
margin-bottom:10px;
}
.about-page .about-story-card p + p{
margin-top:0;
}
.about-page .about-timeline{
gap:14px;
}
.about-page .about-timeline-step{
min-height:0;
padding:22px;
border-radius:18px;
}
.about-page .about-timeline-step h3{
font-size:18px;
}
.about-page .leader-photo-placeholder{
min-height:320px;
background:
linear-gradient(180deg, rgba(41,231,255,0.08), rgba(58,111,246,0.04)),
var(--navy-panel);
}
.about-page .leader-photo-placeholder small{
display:block;
max-width:230px;
margin-top:8px;
color:var(--text-low);
font-size:13px;
line-height:1.5;
}
.about-page .leader-photo-card{
min-height:360px;
}
.about-page .leader-photo-card img{
min-height:332px;
}
.about-page .uae-presence-layout{
grid-template-columns:0.72fr 1.28fr;
gap:20px;
}
.about-page .vip-uae-layout{
grid-template-columns:minmax(340px,0.78fr) minmax(0,1.22fr);
gap:22px;
}
.about-page .uae-map-card{
min-height:430px;
padding:20px;
border-radius:22px;
}
.about-page .vip-uae-layout .uae-map-card{
min-height:0;
padding:24px;
}
.about-page .uae-map-orbit{
min-height:390px;
}
.about-page .vip-uae-layout .uae-map-orbit{
min-height:0;
}
.about-page .presence-list{
gap:10px;
}
.about-page .vip-presence-list{
gap:18px;
}
.about-page .presence-card{
padding:18px;
}
.about-page .vip-location-card{
padding:0;
}
.about-page .company-card-grid{
gap:14px;
}
.about-page .company-card{
min-height:0;
padding:22px;
}
.about-page .sourcing-network{
padding:28px;
}
.about-page .why-grid{
gap:10px;
}
.about-page .why-item{
min-height:56px;
justify-content:center;
text-align:center;
border-radius:14px;
}
.about-page .final-about-cta{
padding:34px;
}
@media (max-width: 980px){
.about-page .about-hero-grid,
.about-page .leadership-grid,
.about-page .digital-grid,
.about-page .uae-presence-layout{
grid-template-columns:1fr;
}
.uae-operations-intro{
grid-template-columns:1fr;
}
.vip-uae-layout .uae-map-card{
position:relative;
top:auto;
min-height:0;
}
.vip-location-card{
grid-template-columns:1fr;
}
.sourcing-capability-grid{
grid-template-columns:1fr;
}
.sourcing-showcase{
grid-template-columns:1fr;
}
.sourcing-showcase-stats,
.sourcing-market-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.sourcing-globe{
min-height:260px;
}
.sourcing-country-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.sourcing-detail-top,
.supplier-partnership-card{
flex-direction:column;
align-items:stretch;
}
.sourcing-country-metrics{
width:100%;
}
}
@media (max-width: 768px){
.about-page section{
padding:42px 0 !important;
}
.about-page .section-head{
margin-bottom:22px !important;
}
.about-page .section-head h2,
.about-page .section-head h2[style]{
font-size:24px !important;
line-height:1.18 !important;
}
.about-page .section-head p{
font-size:14.5px !important;
line-height:1.55 !important;
}
.about-page .about-hero{
padding:104px 0 36px !important;
}
.about-page .about-hero h1{
font-size:34px !important;
line-height:1.06 !important;
}
.about-page .about-hero p{
margin-top:16px !important;
font-size:15px !important;
line-height:1.55 !important;
}
.about-page .about-hero-actions{
margin-top:22px;
gap:10px;
}
.about-page .about-hero-actions .btn{
width:100%;
}
.about-hero-tags{
margin-top:16px;
gap:8px;
}
.about-hero-tags span{
font-size:11.5px;
padding:8px 10px;
}
.about-page .about-hero-panel{
padding:18px;
}
.about-page .about-stat strong{
font-size:42px;
}
.about-page .about-stat-grid{
grid-template-columns:1fr 1fr;
}
.about-page .about-stat-grid div{
min-height:82px;
padding:12px;
}
.about-page .about-stat-grid strong{
font-size:25px;
}
.about-page .about-stat-grid span{
font-size:12px;
}
.about-page .about-story-card,
.about-page .about-timeline,
.about-page .company-card-grid,
.about-page .why-grid,
.about-page .grid-2,
.about-page .grid-4{
grid-template-columns:1fr !important;
}
.about-page .about-story-card,
.about-page .trust-card,
.about-page .final-about-cta,
.about-page .sourcing-network,
.about-page .sourcing-headline-card,
.about-page .sourcing-detail-panel,
.about-page .supplier-partnership-card{
padding:18px !important;
border-radius:18px !important;
}
.about-page .about-story-card h3,
.about-page .presence-card h3,
.about-page .company-card h3{
font-size:17px !important;
}
.about-page .about-timeline-step,
.about-page .presence-card,
.about-page .company-card{
padding:17px;
border-radius:16px;
}
.about-page .leadership-grid,
.about-page .digital-grid{
gap:20px !important;
}
.about-page .leader-photo-placeholder{
min-height:190px;
}
.about-page .leader-photo-card{
min-height:360px;
padding:10px;
border-radius:20px;
}
.about-page .leader-photo-card img{
min-height:340px;
border-radius:15px;
}
.about-page .leader-photo-caption{
left:24px;
right:24px;
bottom:22px;
}
.about-page .leader-photo-caption strong{
font-size:24px;
}
.about-page .leader-photo-placeholder i{
width:68px !important;
height:68px !important;
font-size:28px !important;
margin-bottom:10px !important;
}
.about-page .uae-map-card{
min-height:260px;
padding:14px;
}
.about-page .uae-operations-intro{
padding:20px;
border-radius:20px;
}
.about-page .uae-operations-intro h2{
font-size:30px;
line-height:1.08;
}
.about-page .uae-operations-intro p{
font-size:14px;
line-height:1.55;
}
.about-page .uae-operations-summary{
grid-template-columns:1fr 1fr;
gap:10px;
}
.about-page .uae-operations-summary div{
min-height:92px;
padding:13px;
border-radius:15px;
}
.about-page .uae-operations-summary strong{
font-size:25px;
}
.about-page .vip-uae-layout .uae-map-card{
min-height:0;
padding:18px;
}
.about-page .uae-map-copy h3{
font-size:22px;
}
.about-page .uae-map-orbit{
min-height:230px;
}
.about-page .vip-uae-layout .uae-map-orbit{
min-height:280px;
}
.about-page .map-point{
min-width:68px;
min-height:31px;
padding:7px 9px;
font-size:10.8px;
}
.about-page .vip-location-card{
grid-template-columns:1fr;
border-radius:20px;
}
.about-page .uae-real-map-panel,
.about-page .vip-uae-layout .uae-real-map-panel{
min-height:0;
padding:10px;
border-radius:18px;
}
.about-page .uae-real-map{
height:310px;
min-height:310px;
border-radius:14px;
}
.about-page .uae-map-legend{
grid-template-columns:1fr;
gap:7px;
}
.about-page .location-photo{
min-height:180px;
}
.about-page .waterfront-slider{
min-height:260px;
}
.about-page .location-content{
padding:20px;
}
.about-page .location-content h3{
font-size:20px !important;
}
.about-page .location-content ul{
grid-template-columns:1fr;
gap:8px;
}
.about-page .location-content li{
min-height:0;
}
.about-page .waterfront-location-card .location-content{
padding:16px;
}
.about-page .waterfront-location-card .location-content p{
line-height:1.42;
}
.about-page .waterfront-location-card .location-content ul{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:7px;
margin-top:11px;
}
.about-page .waterfront-location-card .location-content li{
padding:8px 9px;
font-size:11.6px;
line-height:1.25;
}
.about-page .market-carousel .carousel-arrow{
display:none;
}
.about-page .waterfront-location-card .market-carousel .carousel-arrow{
display:flex;
opacity:0.92;
background:rgba(4,18,32,0.62);
}
.about-page .waterfront-location-card .carousel-arrow.prev{
left:10px;
}
.about-page .waterfront-location-card .carousel-arrow.next{
right:10px;
}
.about-page .waterfront-location-card .carousel-dots{
max-width:170px;
flex-wrap:wrap;
row-gap:4px;
}
.about-page .whatsapp-float{
top:96px;
right:16px;
bottom:auto;
width:48px;
height:48px;
font-size:24px;
}
.about-page .sourcing-network{
gap:18px;
grid-template-columns:1fr;
}
.about-page .sourcing-core{
width:96px;
height:96px;
font-size:24px;
}
.about-page .country-selector button,
.about-page .sourcing-chips span,
.about-page .why-item{
min-height:40px;
font-size:12.5px;
padding:10px 12px;
}
.about-page .sourcing-headline-card strong{
font-size:48px;
}
.about-page .sourcing-showcase{
min-height:0;
padding:22px;
border-radius:22px;
gap:22px;
}
.about-page .sourcing-showcase::before{
inset:44% 0 0;
opacity:0.55;
}
.about-page .sourcing-showcase-copy h3{
margin:16px 0 12px;
font-size:32px;
line-height:1.08;
}
.about-page .sourcing-showcase-copy p{
font-size:14.5px;
line-height:1.55;
}
.about-page .sourcing-showcase-stats{
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:20px;
}
.about-page .sourcing-showcase-stats div{
min-height:82px;
padding:13px;
border-radius:15px;
}
.about-page .sourcing-showcase-stats i{
font-size:17px;
margin-bottom:7px;
}
.about-page .sourcing-globe{
min-height:190px;
}
.about-page .route-dot{
width:8px;
height:8px;
}
.about-page .line-1{ width:120px; }
.about-page .line-2{ width:100px; }
.about-page .line-3{ width:140px; }
.about-page .sourcing-network-title{
margin-top:26px;
}
.about-page .sourcing-network-title h3{
font-size:22px;
}
.about-page .sourcing-market-grid{
grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:26px;
}
.about-page .sourcing-market-card{
min-height:148px;
padding:15px;
border-radius:17px;
}
.about-page .sourcing-market-card h4{
font-size:17px;
}
.about-page .sourcing-market-card p{
font-size:12px;
line-height:1.35;
}
.about-page .sourcing-headline-card h3 span{
max-width:100%;
font-size:21px;
}
.about-page .sourcing-totals,
.about-page .sourcing-country-metrics,
.about-page .sourcing-product-list,
.about-page .sourcing-country-grid{
grid-template-columns:1fr;
}
.about-page .sourcing-country-card{
padding:20px 18px;
border-radius:20px;
}
.about-page .sourcing-country-grid{
gap:18px;
}
.about-page .sourcing-country-card div{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:16px;
padding-bottom:12px;
border-bottom:1px solid var(--line);
}
.about-page .sourcing-country-card span{
min-height:28px;
padding:6px 9px;
font-size:10.5px;
color:var(--gold);
background:rgba(245,197,66,0.12);
border:1px solid rgba(245,197,66,0.18);
flex-shrink:0;
}
.about-page .sourcing-country-card h4{
margin:0;
font-size:20px;
line-height:1.1;
text-align:right;
}
.about-page .sourcing-country-card ul{
gap:8px;
padding-left:17px;
}
.about-page .sourcing-country-card li,
.about-page .sourcing-country-card p{
font-size:13px;
line-height:1.42;
}
.about-page .sourcing-country-card p{
margin-top:14px;
padding-top:12px;
}
.about-page .section-head.compact h3{
font-size:22px;
}
.about-page .sourcing-totals div,
.about-page .sourcing-country-metrics div{
min-height:72px;
}
.about-page .sourcing-detail-top h3,
.about-page .supplier-partnership-card h3{
font-size:23px;
}
.about-page .final-about-cta h2{
font-size:23px !important;
}
}
@media (max-width: 430px){
.about-page .about-stat-grid{
grid-template-columns:1fr;
}
.about-page .sourcing-market-grid,
.about-page .sourcing-showcase-stats{
grid-template-columns:1fr;
}
.about-page .sourcing-market-card{
min-height:132px;
}
}
/* ===========================================================
LUXURY VISUAL REFINEMENT
Light, premium, international seafood + technology finish.
This layer preserves existing functionality and content.
=========================================================== */
:root{
--navy-abyss:#061525;
--navy-deep:#f6fafb;
--navy-mid:#eef6f7;
--navy-panel:rgba(255,255,255,0.82);
--navy-panel-solid:#ffffff;
--line:rgba(17,52,78,0.12);
--line-bright:rgba(7,126,143,0.28);
--cyan:#0b9faf;
--cyan-soft:#168da0;
--blue:#246f9f;
--blue-deep:#0b3150;
--gold:#b58a3b;
--text-hi:#0b2235;
--text-mid:#435b6d;
--text-low:#718394;
--radius-lg:18px;
--radius-md:12px;
}
html,
body{
background:var(--navy-deep);
color:var(--text-hi);
}
body::before{
background:
radial-gradient(ellipse 820px 420px at 10% -8%, rgba(11,159,175,0.08), transparent 62%),
radial-gradient(ellipse 760px 460px at 95% 10%, rgba(181,138,59,0.07), transparent 64%),
linear-gradient(180deg, #fbfefe 0%, var(--navy-deep) 52%, #f8fbfb 100%);
}
h1,h2,h3,h4,
.brand-name{
font-family:'Inter', sans-serif;
letter-spacing:0;
}
h1,h2{
font-weight:650;
}
h3,h4{
font-weight:650;
}
p{
color:var(--text-mid);
line-height:1.72;
}
.mono,
.eyebrow,
.footer-col h5,
.footer-tag{
font-family:'Inter', sans-serif;
letter-spacing:0;
}
.eyebrow{
text-transform:none;
color:var(--cyan-soft);
font-size:13px;
font-weight:700;
margin-bottom:14px;
}
.eyebrow::before{
background:var(--gold);
box-shadow:none;
}
.section-head{
max-width:760px;
margin-bottom:46px;
}
.section-head h2{
font-size:clamp(30px,3.4vw,42px);
line-height:1.14;
}
.section-head p{
font-size:16.5px;
color:var(--text-mid);
}
section{
padding:104px 0;
}
.glass{
background:var(--navy-panel);
border:1px solid var(--line);
box-shadow:0 18px 50px rgba(14,39,56,0.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.glass::after{
opacity:0;
}
.glow-hover:hover{
transform:translateY(-4px);
border-color:var(--line-bright);
box-shadow:0 24px 54px rgba(14,39,56,0.12);
}
.btn{
border-radius:999px;
font-weight:650;
letter-spacing:0;
box-shadow:none;
}
.btn-primary{
background:linear-gradient(135deg, #087c8d, #0b4f77);
color:#fff;
box-shadow:0 12px 28px rgba(8,86,107,0.18);
}
.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(8,86,107,0.22);
}
.btn-ghost{
background:#fff;
border-color:rgba(17,52,78,0.18);
color:var(--text-hi);
}
.btn-ghost:hover{
background:#f2fafb;
border-color:var(--line-bright);
}
.navbar{
position:fixed;
top:0;
left:0;
right:0;
z-index:6000;
background:rgba(255,255,255,0.96);
border-bottom:1px solid rgba(17,52,78,0.12);
box-shadow:0 14px 40px rgba(14,39,56,0.1);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
transform:none !important;
visibility:visible !important;
}
.nav-links a,
.brand-name{
color:var(--text-hi);
}
.nav-links a::after{
background:var(--cyan);
}
.mobile-menu{
background:rgba(255,255,255,0.97);
border-bottom:1px solid rgba(17,52,78,0.1);
}
.mobile-menu > a{
color:var(--text-hi);
}
.mobile-menu-group summary{
color:#082b43;
}
.mobile-menu-group a{
color:#315269;
}
.nav-toggle span{
background:var(--text-hi);
}
.ambient-bg{
opacity:0.16;
max-width:100vw;
overflow:hidden;
}
.ambient-bg .layer-wave{
left:0;
width:100%;
}
.hero-full,
.hero-slider{
background:#061525;
}
.hero-slides,
.hero-slide,
.fish-layer{
max-width:100vw;
overflow:hidden;
}
.fish-layer{
contain:paint;
display:none;
}
.hero-slide{
transform:none !important;
}
.hero-bg::before,
.hero-slide::before{
background:linear-gradient(180deg, rgba(3,15,29,0.28) 0%, rgba(5,18,32,0.68) 68%, rgba(6,21,37,0.92) 100%);
}
.hero-slide::after,
.hero-bg::after{
opacity:0.38;
}
.hero-slide-content h1,
.hero-slide-content p,
.hero-slide-content .eyebrow,
.hero-content-wrap .eyebrow{
color:#fff;
}
.hero-slide-content p{
color:rgba(240,247,250,0.88);
}
.hero-gradient-text,
.hero-slide-content h1 span[style]{
background:linear-gradient(120deg, #9ce9ef, #ffffff) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
}
.hero-arrow{
background:rgba(255,255,255,0.14);
border-color:rgba(255,255,255,0.22);
color:#fff;
}
.hero-dot{
background:rgba(255,255,255,0.42);
}
.hero-dot.active{
background:#fff;
box-shadow:none;
}
.card,
.product-card,
.company-card,
.presence-card,
.why-item,
.about-timeline-step,
.about-story-card,
.trust-card,
.final-about-cta,
.supplier-partnership-card,
.sourcing-country-card,
.sourcing-detail-panel,
.sourcing-headline-card,
.sourcing-network,
.uae-operations-intro,
.vip-location-card{
border-radius:18px;
box-shadow:0 18px 46px rgba(14,39,56,0.08);
}
.card h3,
.product-card h3,
.company-card h3,
.presence-card h3,
.location-content h3,
.sourcing-country-card h4{
color:var(--text-hi);
}
.icon{
background:rgba(11,159,175,0.09);
border:1px solid rgba(11,159,175,0.14);
color:var(--cyan);
box-shadow:none;
}
input,textarea,select{
background:#fff;
color:var(--text-hi);
border-color:rgba(17,52,78,0.16);
}
input:focus,textarea:focus,select:focus{
border-color:var(--cyan);
box-shadow:0 0 0 4px rgba(11,159,175,0.1);
}
.product-cta,
.about-hero,
.uae-operations-section,
.global-sourcing-section,
#why-choose-us,
#digital-transformation{
background:linear-gradient(180deg, #f9fcfc 0%, #eef6f7 100%) !important;
}
.about-hero h1{
max-width:760px;
font-size:clamp(38px,4.5vw,58px);
line-height:1.08;
color:var(--text-hi);
}
.about-hero p{
color:var(--text-mid);
}
.about-stat strong,
.about-stat-grid strong,
.sourcing-headline-card strong,
.sourcing-totals b,
.sourcing-country-metrics b,
.uae-operations-summary strong{
color:var(--blue-deep);
}
.about-hero-tags span,
.sourcing-kicker,
.location-content > span,
.sourcing-country-card span,
.sourcing-product-list span{
color:#87652b;
background:rgba(181,138,59,0.1);
border-color:rgba(181,138,59,0.18);
}
.uae-map-card,
.sourcing-showcase,
.sourcing-market-card,
.sourcing-globe,
.pending-photo{
color:#fff;
}
.uae-map-card h3,
.uae-map-card p,
.uae-map-card .mono,
.sourcing-showcase h3,
.sourcing-showcase p,
.sourcing-showcase .sourcing-kicker,
.sourcing-showcase-stats b,
.sourcing-showcase-stats span,
.sourcing-market-card h4,
.sourcing-market-card p{
color:#fff;
}
.uae-map-card .mono,
.sourcing-showcase .sourcing-kicker{
background:rgba(255,255,255,0.12);
border-color:rgba(255,255,255,0.18);
}
.uae-map-card,
.vip-uae-layout .uae-map-card,
.sourcing-showcase{
box-shadow:0 28px 70px rgba(3,20,34,0.18);
}
.map-point,
.country-selector button{
box-shadow:none;
}
.country-selector button:hover,
.country-selector button.active{
background:linear-gradient(135deg, #0b9faf, #0b4f77);
color:#fff;
box-shadow:0 12px 26px rgba(8,86,107,0.16);
}
.sourcing-market-card span{
background:linear-gradient(135deg, #e8c978, #0b9faf);
}
.global-sourcing-section{
background:#061525 !important;
color:#fff;
}
.global-sourcing-section .section-head h2,
.global-sourcing-section .section-head p,
.global-sourcing-section .eyebrow,
.global-sourcing-section .sourcing-network-title h3{
color:#fff;
}
.global-sourcing-section .section-head p{
color:rgba(235,244,248,0.76);
}
.global-sourcing-section .sourcing-showcase{
background:
radial-gradient(circle at 78% 42%, rgba(41,231,255,0.2), transparent 0 18%, transparent 42%),
radial-gradient(circle at 76% 46%, rgba(11,79,119,0.42), transparent 0 36%, transparent 62%),
linear-gradient(135deg, rgba(4,18,32,0.98), rgba(6,31,52,0.96));
border-color:rgba(41,231,255,0.2);
}
.global-sourcing-section .sourcing-showcase-stats{
grid-template-columns:repeat(3, minmax(0, 1fr));
}
.global-sourcing-section .sourcing-showcase-stats div{
background:rgba(255,255,255,0.08);
border-color:rgba(255,255,255,0.14);
}
.global-sourcing-section .sourcing-market-card{
min-height:190px;
background:
linear-gradient(180deg, rgba(10,45,72,0.18), rgba(4,18,32,0.94)),
radial-gradient(circle at 78% 18%, rgba(41,231,255,0.26), transparent 0 24%, transparent 48%),
linear-gradient(135deg, #113554, #061525);
border-color:rgba(41,231,255,0.18);
box-shadow:0 20px 48px rgba(0,0,0,0.18);
}
.global-sourcing-section .sourcing-market-card::after{
content:"";
position:absolute;
inset:18px 18px auto auto;
width:54px;
height:54px;
border-radius:50%;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.12);
}
.global-sourcing-section .sourcing-market-card h4{
color:#fff;
}
.global-sourcing-section .sourcing-market-card p{
color:rgba(235,244,248,0.78);
}
.global-sourcing-section .sourcing-market-card.highlight{
border-color:rgba(156,233,239,0.46);
box-shadow:0 24px 60px rgba(41,231,255,0.14);
}
.global-sourcing-section .sourcing-market-card.hub{
background:
linear-gradient(180deg, rgba(181,138,59,0.2), rgba(4,18,32,0.94)),
radial-gradient(circle at 78% 18%, rgba(232,201,120,0.26), transparent 0 24%, transparent 48%),
linear-gradient(135deg, #16394f, #061525);
}
.global-sourcing-section .sourcing-capacity-banner{
border-color:rgba(156,233,239,0.28);
box-shadow:0 24px 70px rgba(0,0,0,0.18);
}
footer{
background:#061525;
color:#fff;
}
footer p,
.footer-col a,
.footer-bottom p{
color:rgba(235,244,248,0.72);
}
.footer-col h5,
.footer-tag,
.footer-col a:hover{
color:#a9e7ee;
}
@media (max-width: 768px){
section{
padding:72px 0;
}
.section-head h2{
font-size:clamp(26px,8vw,34px);
}
.about-page .about-hero h1,
.about-hero h1{
font-size:clamp(34px,9vw,42px) !important;
line-height:1.1 !important;
}
.hero-slide-content h1{
font-size:clamp(34px,9vw,42px) !important;
line-height:1.08 !important;
}
.hero-slide-content p,
.section-head p{
font-size:15.5px !important;
}
.glass,
.card,
.product-card,
.company-card,
.presence-card{
border-radius:16px;
}
.global-sourcing-section .sourcing-showcase-stats{
grid-template-columns:1fr 1fr;
}
.sourcing-capacity-banner{
grid-template-columns:1fr;
text-align:left;
}
.sourcing-capacity-banner p{
max-width:100%;
}
}
/* ---------- Operating Ecosystem ---------- */
.operating-ecosystem-section{
background:
radial-gradient(circle at 18% 10%, rgba(11,159,175,0.1), transparent 28%),
radial-gradient(circle at 86% 18%, rgba(199,164,91,0.12), transparent 26%),
linear-gradient(180deg, #f8fbfc 0%, #eef7f8 100%);
color:var(--text-hi);
}
.operating-ecosystem-section .section-head p{
color:#557083;
}
.ecosystem-leadership-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
max-width:940px;
margin:0 auto 18px;
}
.ecosystem-leader-card{
padding:26px;
border-color:rgba(11,159,175,0.18);
background:linear-gradient(180deg,#ffffff 0%,#f5fbfc 100%);
box-shadow:0 18px 44px rgba(7,39,58,0.10);
}
.ecosystem-leader-card span,
.ecosystem-stage-panel > span,
.ecosystem-digital-copy .mono{
color:#0b9faf;
font-size:12px;
font-weight:800;
letter-spacing:0.14em;
text-transform:uppercase;
}
.ecosystem-leader-card h3{
margin:9px 0 8px;
font-size:clamp(22px,2.2vw,30px);
letter-spacing:0;
color:#082b43;
}
.ecosystem-leader-card p,
.ecosystem-stage-panel p,
.ecosystem-digital-copy p,
.ecosystem-note p{
color:#29475b;
line-height:1.65;
margin:0;
}
.ecosystem-automation-pill{
width:min(980px,100%);
margin:0 auto 20px;
display:grid;
grid-template-columns:auto auto 1fr;
align-items:center;
gap:12px;
padding:14px 18px;
border:1px solid rgba(11,159,175,0.2);
border-radius:999px;
background:rgba(255,255,255,0.86);
box-shadow:0 18px 48px rgba(14,39,56,0.08);
}
.ecosystem-automation-pill i{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:50%;
background:#e7f8fa;
color:#0b9faf;
}
.ecosystem-automation-pill strong{
color:#082b43;
}
.ecosystem-automation-pill span{
color:#29475b;
font-size:14px;
}
.ecosystem-flow-shell{
padding:26px;
border-color:rgba(11,159,175,0.16);
background:linear-gradient(180deg,#ffffff 0%,#f3fafb 100%);
box-shadow:0 22px 60px rgba(7,39,58,0.10);
}
.ecosystem-flow-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:18px;
margin-bottom:22px;
}
.ecosystem-flow-head h3{
margin:6px 0 0;
color:#082b43;
font-size:clamp(24px,3vw,38px);
}
.ecosystem-flow-head p{
margin:0;
color:#29475b;
font-size:14px;
}
.ecosystem-flow{
position:relative;
display:grid;
grid-template-columns:repeat(9,minmax(132px,1fr));
gap:12px;
overflow-x:auto;
padding:8px 4px 18px;
scrollbar-width:thin;
}
.ecosystem-flow::before{
content:"";
position:absolute;
left:34px;
right:34px;
top:64px;
height:2px;
background:linear-gradient(90deg, rgba(11,159,175,0.1), rgba(11,159,175,0.45), rgba(199,164,91,0.34));
pointer-events:none;
}
.ecosystem-node{
position:relative;
z-index:1;
min-height:188px;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
padding:16px 14px;
border:1px solid rgba(17,52,78,0.12);
border-radius:18px;
background:linear-gradient(180deg,#fff 0%,#f6fbfc 100%);
color:#0b2f45;
text-align:left;
cursor:pointer;
box-shadow:0 16px 34px rgba(14,39,56,0.08);
transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.ecosystem-node::after{
content:"";
position:absolute;
right:-12px;
top:58px;
width:0;
height:0;
border-left:8px solid rgba(11,159,175,0.55);
border-top:6px solid transparent;
border-bottom:6px solid transparent;
}
.ecosystem-node:last-child::after{
display:none;
}
.ecosystem-node:hover,
.ecosystem-node.active{
transform:translateY(-4px);
border-color:rgba(11,159,175,0.38);
box-shadow:0 24px 52px rgba(11,95,118,0.18);
}
.ecosystem-node.active{
background:linear-gradient(180deg,#eafcff 0%,#fff 100%);
}
.ecosystem-number{
font-family:'JetBrains Mono', monospace;
font-size:12px;
font-weight:800;
color:#8c6c2b;
}
.ecosystem-node i{
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:14px;
background:#eaf9fb;
color:#0b9faf;
font-size:18px;
}
.ecosystem-node strong{
color:#082b43;
font-size:15px;
line-height:1.25;
}
.ecosystem-node small{
color:#29475b;
font-size:12px;
font-weight:650;
line-height:1.35;
}
.ecosystem-stage-panel{
margin-top:10px;
padding:24px;
border:1px solid rgba(11,159,175,0.18);
border-radius:22px;
background:linear-gradient(135deg, rgba(255,255,255,0.98), rgba(237,249,251,0.96));
box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
}
.ecosystem-stage-panel h3{
margin:8px 0 8px;
color:#082b43;
font-size:clamp(22px,2.4vw,32px);
}
.ecosystem-panel-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:16px;
}
.ecosystem-panel-tags span{
padding:8px 10px;
border:1px solid rgba(11,159,175,0.18);
border-radius:999px;
background:#fff;
color:#14384d;
font-size:12px;
font-weight:750;
}
.ecosystem-digital-layer{
margin-top:22px;
display:grid;
grid-template-columns:minmax(260px,0.75fr) minmax(0,1.25fr);
gap:20px;
padding:28px;
border-radius:28px;
background:linear-gradient(135deg,#092a42 0%,#0b4654 100%);
box-shadow:0 24px 62px rgba(8,31,48,0.18);
}
.ecosystem-digital-copy h3{
margin:8px 0 12px;
color:#fff;
font-size:clamp(24px,3vw,40px);
}
.ecosystem-digital-copy p{
color:#d4e5ec;
}
.ecosystem-system-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
}
.ecosystem-system-grid article{
min-height:138px;
padding:15px;
border:1px solid rgba(255,255,255,0.14);
border-radius:18px;
background:rgba(255,255,255,0.08);
color:#fff;
}
.ecosystem-system-grid i{
color:#72eaff;
font-size:18px;
margin-bottom:10px;
}
.ecosystem-system-grid b{
display:block;
margin-bottom:6px;
color:#fff;
font-size:14px;
}
.ecosystem-system-grid span{
display:block;
color:#edf8fb;
font-size:12px;
line-height:1.45;
}
.ecosystem-note{
margin-top:20px;
padding:20px 22px;
display:grid;
grid-template-columns:auto 1fr;
gap:16px;
align-items:start;
background:rgba(255,255,255,0.9);
border-color:rgba(199,164,91,0.24);
}
.ecosystem-note strong{
color:#8c6c2b;
text-transform:uppercase;
letter-spacing:0.08em;
font-size:12px;
}
/* ---------- Home Executive Architecture ---------- */
.home-executive-section{
background:
radial-gradient(circle at 12% 10%, rgba(11,159,175,0.1), transparent 30%),
linear-gradient(180deg,#f8fbfc 0%,#eef7f8 100%);
}
.home-executive-section .section-head p{
color:#557083;
}
.home-metric-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.home-metric{
padding:24px;
background:rgba(255,255,255,0.9);
border-color:rgba(11,159,175,0.16);
}
.home-metric span{
display:block;
color:#0b9faf;
font-size:12px;
font-weight:800;
letter-spacing:0.12em;
text-transform:uppercase;
}
.home-metric strong{
display:block;
margin:8px 0;
color:#082b43;
font-size:clamp(28px,3.8vw,46px);
line-height:1;
}
.home-metric p{
margin:0;
color:#29475b;
line-height:1.55;
}
.home-pathway-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
.home-pathway{
display:block;
min-height:210px;
padding:24px;
color:inherit;
border:1px solid rgba(17,52,78,0.14);
background:linear-gradient(180deg,#ffffff 0%,#f5fbfc 100%);
box-shadow:0 18px 44px rgba(7,39,58,0.10);
transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.home-pathway:hover{
transform:translateY(-4px);
border-color:rgba(11,159,175,0.38);
background:linear-gradient(180deg,#ffffff 0%,#eefbfc 100%);
box-shadow:0 24px 58px rgba(11,95,118,0.16);
}
.home-pathway i{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:14px;
color:#061525;
background:linear-gradient(135deg,#a9e7ee,#f2d27a);
box-shadow:0 10px 24px rgba(196,154,58,0.20);
margin-bottom:18px;
}
.home-pathway h3{
color:#082b43;
font-size:19px;
font-weight:800;
margin:0 0 9px;
}
.home-pathway p{
color:#29475b;
font-weight:600;
margin:0;
line-height:1.55;
}
.home-pathways-luxury{
position:relative;
overflow:hidden;
scroll-margin-top:96px;
background:
radial-gradient(circle at 10% 12%, rgba(11,159,175,0.14), transparent 30%),
radial-gradient(circle at 86% 18%, rgba(215,169,61,0.12), transparent 28%),
linear-gradient(180deg, #f4fdff 0%, #ffffff 58%, #edf8fa 100%) !important;
}
.home-pathways-luxury::before,
.home-pathways-luxury::after{
content:"";
position:absolute;
pointer-events:none;
border-radius:50%;
opacity:.42;
}
.home-pathways-luxury::before{
width:420px;
height:420px;
left:-180px;
top:80px;
background:repeating-radial-gradient(circle, rgba(11,159,175,0.13) 0 1px, transparent 1px 24px);
}
.home-pathways-luxury::after{
width:520px;
height:520px;
right:-220px;
bottom:-180px;
background:radial-gradient(circle, rgba(177,140,255,0.14), transparent 64%);
}
.home-pathways-luxury .section-head{
position:relative;
z-index:1;
max-width:760px;
margin-left:auto;
margin-right:auto;
}
.home-pathways-luxury .section-head h2{
font-size:clamp(34px, 4vw, 52px);
letter-spacing:0;
}
.home-pathways-luxury .section-head p{
max-width:650px;
margin-left:auto;
margin-right:auto;
color:#456a7e;
}
.luxury-pathway-grid{
position:relative;
z-index:1;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:20px;
}
.luxury-pathway{
position:relative;
min-height:236px;
padding:24px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
isolation:isolate;
overflow:hidden;
border-radius:30px;
border:1px solid rgba(12,53,80,0.1);
background:linear-gradient(160deg, var(--pathway-bg-1), var(--pathway-bg-2));
box-shadow:0 18px 42px rgba(7,39,58,0.08);
color:#0b2538;
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.luxury-pathway:focus-visible{
outline:3px solid rgba(11,159,175,0.34);
outline-offset:4px;
}
.luxury-pathway:hover,
.luxury-pathway:focus-visible{
transform:translateY(-3px);
border-color:rgba(11,159,175,0.24);
box-shadow:0 24px 54px rgba(7,39,58,0.12);
}
.luxury-pathway:active{
transform:translateY(-1px);
}
.pathway-icon{
width:58px;
height:58px;
display:grid;
place-items:center;
border-radius:21px;
color:var(--pathway-accent);
background:rgba(255,255,255,0.72);
border:1px solid rgba(255,255,255,0.78);
box-shadow:0 14px 30px rgba(7,39,58,0.09);
margin-bottom:22px;
}
.pathway-icon i{
width:auto;
height:auto;
margin:0;
display:block;
border-radius:0;
color:inherit;
background:none;
box-shadow:none;
font-size:24px;
}
.luxury-pathway h3{
position:relative;
z-index:1;
color:#0b2538;
font-size:22px;
line-height:1.12;
margin:0 62px 10px 0;
}
.luxury-pathway p{
position:relative;
z-index:1;
max-width:295px;
color:#385c70;
font-weight:650;
line-height:1.55;
}
.pathway-arrow{
position:absolute;
right:22px;
top:24px;
z-index:2;
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:50%;
color:#0b2538;
background:rgba(255,255,255,0.74);
border:1px solid rgba(255,255,255,0.82);
box-shadow:0 12px 24px rgba(7,39,58,0.08);
transition:transform .22s ease, background .22s ease;
}
.luxury-pathway:hover .pathway-arrow,
.luxury-pathway:focus-visible .pathway-arrow{
transform:translateX(3px);
background:#fff;
}
.pathway-wave{
position:absolute;
left:-22px;
right:-22px;
bottom:-44px;
height:116px;
border-radius:50% 50% 0 0;
background:
radial-gradient(circle at 18% 50%, rgba(255,255,255,0.56), transparent 0 18%, transparent 42%),
linear-gradient(135deg, rgba(255,255,255,0.3), var(--pathway-wave));
opacity:.72;
z-index:-1;
}
.card-aqua{--pathway-bg-1:#e8fbfb;--pathway-bg-2:#f9ffff;--pathway-accent:#078f9f;--pathway-wave:rgba(11,159,175,0.2);}
.card-lavender{--pathway-bg-1:#f0ecff;--pathway-bg-2:#fffaff;--pathway-accent:#7057c6;--pathway-wave:rgba(126,101,218,0.2);}
.card-ocean{--pathway-bg-1:#e7f3ff;--pathway-bg-2:#fbfeff;--pathway-accent:#176aa5;--pathway-wave:rgba(47,136,203,0.2);}
.card-coral{--pathway-bg-1:#fff0ed;--pathway-bg-2:#fffdf9;--pathway-accent:#b9695b;--pathway-wave:rgba(232,148,128,0.22);}
.card-mint{--pathway-bg-1:#e9faef;--pathway-bg-2:#fbfffd;--pathway-accent:#2e8d61;--pathway-wave:rgba(83,180,123,0.2);}
.card-sand{--pathway-bg-1:#fff6df;--pathway-bg-2:#fffffb;--pathway-accent:#a47a23;--pathway-wave:rgba(215,169,61,0.24);}
.card-teal{--pathway-bg-1:#e5fbf6;--pathway-bg-2:#fbfffe;--pathway-accent:#087c75;--pathway-wave:rgba(11,159,149,0.2);}
.card-purple{--pathway-bg-1:#f4edff;--pathway-bg-2:#fffaff;--pathway-accent:#8352b8;--pathway-wave:rgba(167,115,211,0.2);}
.card-blue{--pathway-bg-1:#eaf5ff;--pathway-bg-2:#fbfdff;--pathway-accent:#2473b5;--pathway-wave:rgba(54,143,214,0.2);}
.pathway-trust-strip{
position:relative;
z-index:1;
margin:26px auto 0;
max-width:1040px;
display:grid;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:10px;
padding:12px;
border-radius:24px;
background:rgba(255,255,255,0.78);
border:1px solid rgba(11,159,175,0.14);
box-shadow:0 18px 44px rgba(7,39,58,0.08);
backdrop-filter:blur(16px);
}
.pathway-trust-strip a{
min-height:58px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px;
border-radius:18px;
color:#0b2538;
background:linear-gradient(180deg, rgba(255,255,255,0.78), rgba(239,250,252,0.72));
border:1px solid rgba(11,159,175,0.1);
font-weight:850;
text-align:center;
transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.pathway-trust-strip a:hover,
.pathway-trust-strip a:focus-visible{
transform:translateY(-2px);
border-color:rgba(11,159,175,0.28);
background:#fff;
outline:none;
}
.pathway-trust-strip i{
color:#0b9faf;
}
@media (max-width: 1180px){
.ecosystem-flow{
grid-template-columns:repeat(9,152px);
}
.ecosystem-system-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.home-pathway-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.luxury-pathway-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.pathway-trust-strip{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width: 820px){
.ecosystem-leadership-grid,
.ecosystem-digital-layer,
.ecosystem-note{
grid-template-columns:1fr;
}
.ecosystem-automation-pill{
grid-template-columns:auto 1fr;
align-items:start;
border-radius:24px;
}
.ecosystem-automation-pill span{
grid-column:1 / -1;
}
.ecosystem-flow-head{
display:block;
}
.ecosystem-flow-head p{
margin-top:8px;
}
.home-metric-grid,
.home-pathway-grid{
grid-template-columns:1fr;
}
.luxury-pathway-grid{
grid-template-columns:1fr;
gap:14px;
}
.luxury-pathway{
min-height:190px;
padding:20px;
border-radius:24px;
}
.pathway-icon{
width:50px;
height:50px;
border-radius:18px;
margin-bottom:18px;
}
.luxury-pathway h3{
font-size:20px;
}
.pathway-arrow{
width:38px;
height:38px;
right:18px;
top:20px;
}
.pathway-trust-strip{
grid-template-columns:1fr;
border-radius:22px;
}
.ecosystem-flow{
display:flex;
flex-direction:column;
overflow:visible;
padding:2px 0 10px;
}
.ecosystem-flow::before{
left:25px;
right:auto;
top:22px;
bottom:28px;
width:2px;
height:auto;
background:linear-gradient(180deg, rgba(11,159,175,0.12), rgba(11,159,175,0.45), rgba(199,164,91,0.34));
}
.ecosystem-node{
min-height:0;
padding:16px 16px 16px 66px;
}
.ecosystem-node i{
position:absolute;
left:8px;
top:18px;
}
.ecosystem-node::after{
display:none;
}
}
@media (max-width: 520px){
.ecosystem-flow-shell,
.ecosystem-digital-layer{
padding:18px;
border-radius:22px;
}
.ecosystem-system-grid{
grid-template-columns:1fr;
}
.ecosystem-leader-card{
padding:20px;
}
}
/* ---------- Commercial Readiness Additions ---------- */
.commercial-page .commercial-hero{
background:
radial-gradient(circle at 12% 0%, rgba(11,159,175,0.14), transparent 32%),
linear-gradient(180deg,#061525 0%,#0a1730 100%);
}
.commercial-section{
padding:96px 0;
}
.commercial-section.light-band{
background:linear-gradient(180deg,#f8fbfc 0%,#eef7f8 100%);
}
.commercial-section.light-band h2,
.commercial-section.light-band h3,
.commercial-section.light-band label,
.commercial-section.light-band .portfolio-group-head h2{
color:#082b43;
}
.commercial-section.light-band p,
.commercial-section.light-band li{
color:#35576d;
}
.portfolio-filter-note{
max-width:880px;
margin:0 auto 48px;
padding:20px 22px;
display:grid;
grid-template-columns:auto 1fr;
gap:14px;
align-items:start;
background:rgba(255,255,255,0.92);
border-color:rgba(199,164,91,0.24);
}
.portfolio-filter-note i{
color:#c49a3a;
margin-top:4px;
}
.portfolio-filter-note p{
color:#315269;
font-weight:600;
}
.portfolio-group{
margin-top:64px;
}
.portfolio-group-head{
max-width:720px;
margin-bottom:22px;
}
.portfolio-group-head span,
.product-family{
display:inline-block;
margin-bottom:8px;
color:#0b9faf;
font-size:12px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}
.portfolio-group-head h2{
color:#fff;
font-size:clamp(26px,3vw,38px);
}
.portfolio-group-head p{
margin-top:10px;
color:#b9cce3;
}
.commercial-product-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.commercial-product-card{
overflow:hidden;
border:1px solid rgba(120,170,220,0.16);
border-radius:22px;
background:rgba(255,255,255,0.94);
box-shadow:0 18px 48px rgba(7,39,58,0.12);
}
.product-photo-placeholder{
min-height:180px;
display:grid;
place-items:center;
gap:10px;
padding:24px;
text-align:center;
background:
radial-gradient(circle at 50% 36%, rgba(11,159,175,0.12), transparent 36%),
linear-gradient(180deg,#ffffff 0%,#eef7f8 100%);
color:#0b7786;
}
.product-photo-placeholder i{
width:78px;
height:78px;
display:grid;
place-items:center;
border-radius:24px;
background:linear-gradient(135deg,#e6fbfd,#fff6dc);
color:#0b9faf;
font-size:34px;
box-shadow:0 18px 40px rgba(9,48,70,0.10);
}
.product-photo-placeholder span{
color:#607282;
font-size:12px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.product-card-body{
padding:22px;
}
.product-card-body h3{
color:#082b43;
font-size:20px;
margin-bottom:14px;
}
.product-card-body dl{
display:grid;
gap:9px;
margin:0 0 20px;
}
.product-card-body dl div{
display:grid;
grid-template-columns:82px 1fr;
gap:12px;
align-items:start;
}
.product-card-body dt{
color:#708195;
font-size:12px;
font-weight:800;
text-transform:uppercase;
}
.product-card-body dd{
margin:0;
color:#244154;
font-size:14px;
line-height:1.45;
}
.product-card-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.commercial-route-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
}
.commercial-route-grid .card{
background:rgba(255,255,255,0.92);
border-color:rgba(11,159,175,0.16);
}
.commercial-route-grid .card h3{
color:#082b43;
}
.commercial-route-grid .card p{
color:#315269;
}
.commercial-form-shell{
display:grid;
grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:34px;
align-items:start;
}
.commercial-form{
padding:32px;
background:rgba(255,255,255,0.94);
border-color:rgba(11,159,175,0.16);
}
.commercial-form .field label{
color:#29475b;
font-weight:800;
}
.commercial-form .field input,
.commercial-form .field select,
.commercial-form .field textarea{
background:#fff;
border-color:rgba(12,53,80,0.18);
color:#082b43;
}
.commercial-form .field input::placeholder,
.commercial-form .field textarea::placeholder{
color:#73889a;
}
.commercial-form .field-help{
margin-top:8px;
color:#5f788b;
font-size:12.5px;
line-height:1.45;
}
.checkbox-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
padding:14px;
border:1px solid rgba(12,53,80,0.14);
border-radius:14px;
background:#f8fbfc;
}
.checkbox-grid label,
.consent-line label{
display:flex;
align-items:flex-start;
gap:9px;
color:#29475b;
font-size:13.5px;
line-height:1.45;
}
.form-status{
margin-top:14px;
color:#0b7786;
font-weight:700;
min-height:22px;
}
.commercial-check-list{
display:grid;
gap:10px;
padding:0;
margin:24px 0 0;
list-style:none;
}
.commercial-check-list li{
position:relative;
padding-left:24px;
color:#d4e5ec;
}
.commercial-check-list li::before{
content:'';
position:absolute;
left:0;
top:.65em;
width:8px;
height:8px;
border-radius:50%;
background:#0b9faf;
}
.app-conversion-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,420px);
gap:56px;
align-items:center;
}
.app-benefit-list{
display:grid;
gap:14px;
margin:26px 0;
}
.app-benefit-list article{
display:grid;
grid-template-columns:auto 1fr;
gap:8px 14px;
padding:16px;
border:1px solid rgba(120,170,220,0.16);
border-radius:18px;
background:rgba(255,255,255,0.08);
}
.app-benefit-list i{
grid-row:1 / span 2;
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:14px;
background:linear-gradient(135deg,#a9e7ee,#f2d27a);
color:#061525;
}
.app-benefit-list b{
color:#fff;
}
.app-benefit-list span{
color:#b9cce3;
line-height:1.5;
}
.commercial-small-note{
margin-top:14px;
color:#b9cce3;
font-size:13.5px;
}
.contact-route-grid a{
color:inherit;
}
.contact-card-stack{
display:grid;
gap:12px;
margin-top:24px;
}
.contact-card-stack .card{
padding:20px;
}
.contact-card-stack .card h3{
color:#082b43;
}
.contact-card-stack .card a,
.contact-card-stack .card p{
color:#315269;
}
@media (max-width: 1040px){
.commercial-product-grid,
.commercial-route-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.commercial-form-shell,
.app-conversion-grid{
grid-template-columns:1fr;
}
}
@media (max-width: 640px){
.commercial-section{
padding:70px 0;
}
.commercial-product-grid,
.commercial-route-grid,
.checkbox-grid{
grid-template-columns:1fr;
}
.commercial-form{
padding:22px;
}
.product-card-actions .btn{
width:100%;
}
}
/* ===========================================================
LIGHT OCEAN LUXURY REFINEMENT
Style-only layer from the 16 Aug email task.
=========================================================== */
:root{
--lux-ink:#082b43;
--lux-ink-soft:#315269;
--lux-muted:#607282;
--lux-line:rgba(12,53,80,0.12);
--lux-line-strong:rgba(11,159,175,0.2);
--lux-white:#fffdf8;
--lux-pearl:#f7fbfb;
--lux-aqua:#e9f8f8;
--lux-blue:#edf7fb;
--lux-sand:#fbf6ea;
--lux-gold:#c49a3a;
--lux-teal:#0b9faf;
}
html,
body{
background:linear-gradient(180deg, var(--lux-white) 0%, var(--lux-pearl) 52%, #eef8fa 100%);
color:var(--lux-ink);
}
body::before{
background:
radial-gradient(ellipse 760px 420px at 8% -8%, rgba(11,159,175,0.13), transparent 62%),
radial-gradient(ellipse 680px 420px at 100% 10%, rgba(196,154,58,0.09), transparent 62%),
linear-gradient(180deg, var(--lux-white), var(--lux-pearl));
opacity:1;
}
.ambient-bg{
opacity:0.22;
mix-blend-mode:multiply;
}
h1,h2,h3,h4{
color:var(--lux-ink);
letter-spacing:0;
}
p{
color:var(--lux-ink-soft);
}
section{
background:linear-gradient(180deg, var(--lux-white), var(--lux-pearl));
}
section[style*="var(--navy-mid)"],
.light-band,
.home-pathways-section,
.global-sourcing-section,
.uae-operations-section{
background:linear-gradient(180deg, var(--lux-aqua), var(--lux-pearl)) !important;
}
.section-head{
margin-bottom:52px;
}
.section-head h2,
.section-head h3{
color:var(--lux-ink);
}
.section-head p{
color:var(--lux-ink-soft);
font-size:16.5px;
}
.eyebrow{
color:#0b7786;
letter-spacing:.11em;
}
.eyebrow::before{
background:linear-gradient(135deg, var(--lux-teal), #7fdce6);
box-shadow:0 0 0 5px rgba(11,159,175,0.1);
}
.glass{
background:rgba(255,255,255,0.9);
border-color:var(--lux-line);
box-shadow:0 18px 46px rgba(7,39,58,0.08);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}
.glass::after{
background:linear-gradient(150deg, rgba(11,159,175,0.2), transparent 45%, rgba(196,154,58,0.14));
}
.glow-hover:hover,
.glass:hover{
border-color:var(--lux-line-strong);
box-shadow:0 22px 54px rgba(7,39,58,0.11);
}
.card,
.product-card,
.company-card,
.presence-card,
.sourcing-country-card,
.sourcing-product-list article,
.commercial-product-card,
.commercial-route-grid .card,
.contact-card-stack .card{
border-radius:18px;
background:rgba(255,255,255,0.94);
border-color:var(--lux-line);
box-shadow:0 16px 42px rgba(7,39,58,0.08);
}
.card h3,
.product-card h3,
.company-card h3,
.presence-card h3,
.sourcing-country-card h4,
.sourcing-product-list strong,
.product-card-body h3{
color:var(--lux-ink);
}
.card p,
.product-card p,
.company-card p,
.presence-card p,
.sourcing-country-card li,
.sourcing-product-list p,
.product-card-body dd{
color:var(--lux-ink-soft);
}
.card .icon,
.product-icon{
background:linear-gradient(135deg, #e7fbfc, #fff6df);
border-color:rgba(11,159,175,0.18);
color:#0b8e9c;
box-shadow:0 12px 28px rgba(7,39,58,0.08);
}
.btn{
letter-spacing:0;
box-shadow:none;
}
.btn-primary{
background:linear-gradient(135deg, #0b9faf, #68d6df);
color:#06202d;
box-shadow:0 14px 32px rgba(11,159,175,0.18);
}
.btn-primary:hover{
transform:translateY(-1px);
box-shadow:0 18px 38px rgba(11,159,175,0.22);
}
.btn-ghost{
background:rgba(255,255,255,0.72);
border-color:rgba(11,159,175,0.24);
color:var(--lux-ink);
}
.btn-ghost:hover{
background:#fff;
border-color:rgba(11,159,175,0.42);
}
.navbar,
.navbar.scrolled{
background:rgba(255,255,255,0.96);
border-bottom-color:rgba(12,53,80,0.1);
box-shadow:0 12px 34px rgba(6,22,34,0.09);
}
.nav-links a[aria-current="page"],
.nav-links a.active,
.nav-links a:hover{
color:#0b7786;
}
.brand{
box-shadow:0 8px 22px rgba(6,31,48,0.07);
}
.nav-dropdown-menu{
border-color:rgba(11,159,175,0.16);
box-shadow:0 24px 62px rgba(6,31,48,0.13);
}
.mobile-menu{
background:linear-gradient(180deg, rgba(247,251,251,0.98), rgba(232,247,249,0.98));
}
.page-hero,
.hero-full,
.about-hero{
background:linear-gradient(135deg, #07192b 0%, #0c3651 55%, #0b7786 100%);
}
.hero-bg::before,
.hero-slide::before,
.about-hero::before{
background:
linear-gradient(90deg, rgba(4,17,28,0.88) 0%, rgba(5,24,40,0.62) 48%, rgba(7,54,73,0.26) 100%),
linear-gradient(180deg, rgba(4,8,16,0.18) 0%, rgba(4,8,16,0.56) 100%);
}
.hero-slide::after,
.hero-bg::after{
background:radial-gradient(ellipse 820px 420px at 70% 18%, rgba(127,231,255,0.23), transparent 62%);
}
.hero-content-wrap{
min-height:clamp(390px, 46vw, 500px);
}
.hero-heading,
.hero-slide-content h1,
.hero-slide-content .hero-heading,
.about-hero h1{
color:#ffffff;
text-shadow:0 12px 34px rgba(0,0,0,0.18);
}
.hero-copy,
.hero-slide-content p,
.about-hero p{
color:rgba(244,250,253,0.9);
}
.hero-arrow{
background:rgba(255,255,255,0.82);
border-color:rgba(255,255,255,0.55);
color:#0b3a55;
box-shadow:0 14px 34px rgba(0,0,0,0.13);
}
.hero-arrow:hover{
background:#fff;
border-color:#9ce9ef;
box-shadow:0 18px 40px rgba(0,0,0,0.16);
}
.hero-dot{
background:rgba(255,255,255,0.56);
}
.hero-dot.active{
background:#9ce9ef;
box-shadow:0 0 0 4px rgba(156,233,239,0.18);
}
.about-hero-panel,
.sourcing-showcase,
.sourcing-capacity-banner,
.sourcing-network,
.supplier-partnership-card,
.final-about-cta,
.product-cta{
background:
linear-gradient(135deg, rgba(6,35,55,0.94), rgba(8,91,104,0.88)),
radial-gradient(circle at 86% 20%, rgba(156,233,239,0.22), transparent 32%);
border-color:rgba(156,233,239,0.22);
color:#fff;
}
.about-hero-panel h3,
.about-hero-panel strong,
.sourcing-showcase h3,
.sourcing-capacity-banner strong,
.sourcing-network h3,
.supplier-partnership-card h3,
.final-about-cta h2,
.product-cta h3{
color:#fff;
}
.about-hero-panel p,
.about-hero-panel span,
.sourcing-showcase p,
.sourcing-capacity-banner p,
.supplier-partnership-card p,
.final-about-cta p,
.product-cta p{
color:rgba(236,248,251,0.86);
}
.about-stat-grid div,
.sourcing-showcase-stats div,
.sourcing-totals div,
.sourcing-country-metrics div{
background:rgba(255,255,255,0.1);
border-color:rgba(255,255,255,0.17);
}
.about-stat-grid strong,
.sourcing-showcase-stats b,
.sourcing-totals b,
.sourcing-country-metrics b{
color:#fff;
}
.about-stat-grid span,
.sourcing-showcase-stats span,
.sourcing-totals span,
.sourcing-country-metrics span{
color:rgba(236,248,251,0.78);
}
.about-story-card{
background:#fff;
}
.about-timeline-step{
background:#fff;
border-color:var(--lux-line);
box-shadow:0 16px 42px rgba(7,39,58,0.07);
}
.about-timeline-step h3,
.about-timeline-step p{
color:var(--lux-ink);
}
.leader-photo-caption{
background:linear-gradient(135deg, rgba(255,255,255,0.94), rgba(232,247,249,0.9));
border-color:rgba(255,255,255,0.62);
}
.leader-photo-caption strong{
color:var(--lux-ink);
text-shadow:none;
}
.leader-photo-caption span{
color:#0b7786;
}
.company-card.featured,
.sourcing-country-card.highlight{
background:linear-gradient(135deg, #eefbfc, #fff8e9);
border-color:rgba(196,154,58,0.24);
}
.location-content > span,
.sourcing-kicker,
.sourcing-product-list span,
.sourcing-country-card span{
background:#fff6df;
border-color:rgba(196,154,58,0.22);
color:#8c6c2b;
}
.location-content li{
background:#f7fbfb;
border-color:var(--lux-line);
color:var(--lux-ink-soft);
}
.uae-map-copy h3,
.uae-map-copy p{
color:var(--lux-ink);
}
.vip-uae-layout .uae-map-card{
background:linear-gradient(180deg, #ffffff, #eaf8fa);
}
.uae-map-legend span{
background:#fff;
color:var(--lux-ink-soft);
}
.market-carousel,
.pending-photo{
box-shadow:inset 0 -80px 90px rgba(5,20,32,0.34);
}
.carousel-arrow{
background:rgba(255,255,255,0.82);
color:#0b3150;
border-color:rgba(255,255,255,0.4);
}
.carousel-arrow:hover{
background:#fff;
}
.sourcing-market-card{
border-color:rgba(11,159,175,0.14);
background:
linear-gradient(180deg, rgba(10,55,78,0.1), rgba(7,35,54,0.74)),
radial-gradient(circle at 72% 18%, rgba(11,159,175,0.2), transparent 0 24%, transparent 45%);
}
.sourcing-market-card h4,
.sourcing-market-card p{
color:#fff;
}
.country-selector button{
background:#fff;
color:var(--lux-ink);
border-color:var(--lux-line);
}
.country-selector button:hover,
.country-selector button.active{
background:linear-gradient(135deg, #0b9faf, #8feeff);
color:#052332;
}
.commercial-hero .about-hero-panel{
background:rgba(255,255,255,0.92);
border-color:rgba(255,255,255,0.46);
}
.commercial-hero .about-hero-panel strong,
.commercial-hero .about-hero-panel h3{
color:var(--lux-ink);
}
.commercial-hero .about-hero-panel p,
.commercial-hero .about-hero-panel span{
color:var(--lux-ink-soft);
}
.commercial-hero .about-stat-grid div{
background:#f7fbfb;
border-color:var(--lux-line);
}
.portfolio-group{
background:linear-gradient(180deg, #ffffff, #f4fbfb);
}
.portfolio-group-head h2{
color:var(--lux-ink);
}
.portfolio-group-head p{
color:var(--lux-ink-soft);
}
.product-photo-placeholder{
min-height:190px;
background:
radial-gradient(circle at 50% 36%, rgba(11,159,175,0.12), transparent 36%),
linear-gradient(180deg,#ffffff 0%,#effafb 100%);
}
.commercial-form{
background:#fff;
box-shadow:0 18px 46px rgba(7,39,58,0.08);
}
.field input,
.field select,
.field textarea{
background:#fff;
border-color:rgba(12,53,80,0.16);
color:var(--lux-ink);
}
.field label{
color:var(--lux-ink-soft);
}
.commercial-check-list li,
.app-benefit-list span,
.commercial-small-note{
color:var(--lux-ink-soft);
}
.app-benefit-list article{
background:#fff;
border-color:var(--lux-line);
}
.app-benefit-list b{
color:var(--lux-ink);
}
footer{
background:linear-gradient(135deg, #07192b, #0b3150);
border-top-color:rgba(156,233,239,0.16);
}
.footer-col h5{
color:#9ce9ef;
}
.footer-brand p,
.footer-col a,
.footer-bottom p{
color:rgba(236,248,251,0.78);
}
.footer-col a:hover{
color:#ffffff;
}
.footer-tag{
color:#9ce9ef;
}
.whatsapp-float{
display:none;
}
@media (max-width: 980px){
.about-hero-grid,
.leadership-grid,
.digital-grid,
.uae-operations-intro,
.uae-presence-layout,
.vip-uae-layout,
.waterfront-location-card,
.sourcing-capability-grid,
.sourcing-showcase,
.sourcing-network{
grid-template-columns:1fr;
}
.vip-uae-layout .uae-map-card{
position:relative;
top:auto;
}
.sourcing-market-grid,
.sourcing-country-grid,
.company-card-grid{
grid-template-columns:repeat(2, minmax(0,1fr));
}
}
@media (max-width: 700px){
body{
background:var(--lux-pearl);
}
.container{
padding:0 18px;
}
.navbar{
padding:10px 0;
}
.brand{
max-width:calc(100vw - 92px);
gap:8px;
padding-right:10px;
}
.brand-name{
font-size:16px;
}
.page-hero,
.about-hero{
min-height:auto;
padding:132px 0 70px;
}
.hero-full{
min-height:92vh;
}
.hero-content-wrap,
.hero-slide-content{
padding-top:78px;
}
.hero-slide-content h1,
.hero-slide-content .hero-heading,
.about-hero h1{
font-size:clamp(32px, 11vw, 44px) !important;
line-height:1.08;
}
.hero-slide-content p,
.about-hero p{
font-size:16px !important;
}
.hero-slide-content > div[style*="display:flex"],
.about-hero-actions{
width:100%;
flex-direction:column;
}
.hero-slide-content .btn,
.about-hero-actions .btn{
width:100%;
max-width:100%;
}
section{
padding:68px 0;
}
.section-head{
margin-bottom:32px;
}
.section-head h2{
font-size:clamp(28px, 9vw, 36px);
}
.card,
.product-card,
.commercial-form,
.about-story-card,
.uae-operations-intro,
.sourcing-detail-panel{
padding:22px;
border-radius:16px;
}
.about-stat-grid,
.uae-operations-summary,
.location-content ul,
.sourcing-totals,
.sourcing-country-metrics,
.sourcing-showcase-stats{
grid-template-columns:1fr;
}
.sourcing-market-grid,
.sourcing-country-grid,
.company-card-grid,
.commercial-product-grid,
.commercial-route-grid{
grid-template-columns:1fr;
}
.commercial-product-card,
.vip-location-card{
border-radius:18px;
}
.location-photo,
.waterfront-slider{
min-height:280px;
}
.uae-real-map{
height:360px;
min-height:360px;
}
}
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
scroll-behavior:auto !important;
transition-duration:0.01ms !important;
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
}
}
/* ---------- Supplier proposal wizard ---------- */
.supplier-flow-shell{
padding:34px;
border-radius:24px;
background:rgba(255,255,255,0.95);
}
.supplier-flow-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
padding-bottom:24px;
margin-bottom:24px;
border-bottom:1px solid var(--lux-line);
}
.supplier-flow-head h2{
margin:8px 0 10px;
font-size:clamp(28px,3vw,42px);
}
.supplier-step-meter{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:8px;
min-width:240px;
}
.supplier-step-meter span{
width:36px;
height:36px;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid rgba(12,53,80,0.14);
background:#fff;
color:#607282;
font-weight:800;
box-shadow:0 8px 18px rgba(7,39,58,0.06);
}
.supplier-step-meter span.active{
background:linear-gradient(135deg,#0b9faf,#8feeff);
border-color:rgba(11,159,175,0.25);
color:#052332;
}
.supplier-step{
display:none;
border:0;
margin:0;
padding:0;
}
.supplier-step.active{
display:block;
}
.supplier-step legend{
display:block;
width:100%;
margin-bottom:22px;
color:var(--lux-ink);
font-family:'Space Grotesk', sans-serif;
font-size:24px;
font-weight:700;
}
.supplier-step-note{
margin:-8px 0 22px;
color:var(--lux-muted);
}
.supplier-upload-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.supplier-upload-card{
position:relative;
min-height:178px;
padding:22px;
display:flex;
flex-direction:column;
gap:10px;
border:1px dashed rgba(11,159,175,0.32);
border-radius:18px;
background:linear-gradient(180deg,#ffffff,#eefafb);
cursor:pointer;
transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.supplier-upload-card:hover{
transform:translateY(-2px);
border-color:#0b9faf;
box-shadow:0 18px 38px rgba(7,39,58,0.09);
}
.supplier-upload-card input{
position:absolute;
inset:0;
opacity:0;
cursor:pointer;
}
.supplier-upload-card i{
width:48px;
height:48px;
display:grid;
place-items:center;
border-radius:16px;
background:linear-gradient(135deg,#e6fbfd,#fff6dc);
color:#0b8e9c;
font-size:20px;
}
.supplier-upload-card strong{
color:var(--lux-ink);
font-size:17px;
}
.supplier-upload-card span{
color:var(--lux-ink-soft);
font-size:13.5px;
line-height:1.45;
}
.supplier-file-review{
margin-top:18px;
padding:18px;
border-radius:18px;
background:#fff;
border:1px solid var(--lux-line);
}
.supplier-file-review ul,
.supplier-review-files ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}
.supplier-file-review li{
display:grid;
grid-template-columns:minmax(150px,.5fr) minmax(0,1fr) auto;
gap:12px;
align-items:center;
padding:11px 12px;
border-radius:12px;
background:#f7fbfb;
color:var(--lux-ink-soft);
}
.supplier-file-review li span{
color:#0b7786;
font-size:12px;
font-weight:800;
}
.supplier-file-review li strong{
color:var(--lux-ink);
overflow-wrap:anywhere;
}
.supplier-file-review li em{
color:var(--lux-muted);
font-style:normal;
font-size:12px;
}
.supplier-file-warning{
margin-top:12px;
padding:12px;
border-radius:12px;
background:#fff3f1;
border:1px solid rgba(190,65,44,0.18);
}
.supplier-file-warning p{
color:#9d2f20;
font-size:13px;
}
.supplier-review-panel{
display:grid;
gap:20px;
}
.supplier-review-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.supplier-review-grid div,
.supplier-review-files{
padding:14px;
border-radius:14px;
border:1px solid var(--lux-line);
background:#f7fbfb;
}
.supplier-review-grid span{
display:block;
color:var(--lux-muted);
font-size:11.5px;
font-weight:800;
text-transform:uppercase;
}
.supplier-review-grid strong{
display:block;
margin-top:6px;
color:var(--lux-ink);
font-size:14px;
line-height:1.45;
overflow-wrap:anywhere;
}
.supplier-review-files h3{
margin-bottom:12px;
font-size:18px;
}
.supplier-review-files li{
color:var(--lux-ink-soft);
font-size:13.5px;
}
.supplier-email-note{
padding:14px 16px;
border-radius:14px;
background:#fff8e8;
border:1px solid rgba(196,154,58,0.2);
color:#6d5721;
font-size:13.5px;
}
.supplier-consent{
margin-top:20px;
}
.supplier-flow-actions{
display:flex;
justify-content:space-between;
gap:14px;
margin-top:28px;
padding-top:22px;
border-top:1px solid var(--lux-line);
}
.supplier-flow-actions .btn[hidden]{
display:none;
}
.supplier-confirmation{
margin-top:16px;
color:#0b614f;
font-size:14px;
line-height:1.55;
}
.supplier-confirmation strong{
color:#063d34;
}
.supplier-honeypot{
position:absolute;
left:-10000px;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
}
.supplier-confirmation span{
display:block;
margin-top:8px;
color:#0b7786;
font-weight:800;
}
.supplier-success-links{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:12px;
}
.supplier-success-links a{
display:inline-flex;
min-height:38px;
align-items:center;
padding:8px 13px;
border-radius:999px;
background:#fff;
border:1px solid rgba(11,159,175,0.2);
color:#0b7786;
font-weight:800;
font-size:13px;
}
@media (max-width: 760px){
.supplier-flow-shell{
padding:22px;
}
.supplier-flow-head{
flex-direction:column;
}
.supplier-step-meter{
min-width:0;
justify-content:flex-start;
}
.supplier-upload-grid,
.supplier-review-grid{
grid-template-columns:1fr;
}
.supplier-file-review li{
grid-template-columns:1fr;
}
.supplier-flow-actions{
flex-direction:column;
}
.supplier-flow-actions .btn{
width:100%;
}
}
/* ---------- UAE outlet card stability fix ---------- */
.vip-presence-list{
align-items:stretch;
}
.vip-location-card,
.waterfront-location-card{
grid-template-columns:minmax(280px, .94fr) minmax(0, 1.06fr);
min-height:330px;
align-items:stretch;
}
.vip-location-card .location-photo,
.waterfront-location-card .location-photo{
min-height:330px;
height:100%;
aspect-ratio:4 / 3;
}
.vip-location-card .location-content,
.waterfront-location-card .location-content{
min-height:330px;
display:flex;
flex-direction:column;
justify-content:center;
padding:26px;
}
.vip-location-card .location-content p{
min-height:3.1em;
}
.vip-location-card .location-content ul{
margin-top:16px;
}
.waterfront-location-card .location-content ul{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.market-carousel img{
backface-visibility:hidden;
}
.market-carousel .carousel-dots,
.market-carousel .carousel-counter,
.market-carousel .carousel-arrow{
flex-shrink:0;
}
@media (max-width: 980px){
.vip-location-card,
.waterfront-location-card{
grid-template-columns:1fr;
min-height:0;
}
.vip-location-card .location-photo,
.waterfront-location-card .location-photo{
min-height:300px;
height:auto;
aspect-ratio:16 / 10;
}
.vip-location-card .location-content,
.waterfront-location-card .location-content{
min-height:0;
}
}
@media (max-width: 640px){
.vip-location-card .location-photo,
.waterfront-location-card .location-photo{
min-height:260px;
aspect-ratio:4 / 3;
}
.waterfront-location-card .location-content ul{
grid-template-columns:1fr;
}
}
/* ---------- Urgent UAE Presence clipping guard ---------- */
.uae-operations-section .vip-uae-layout,
.uae-operations-section .vip-presence-list,
.uae-operations-section .vip-location-card,
.uae-operations-section .vip-location-card > *{
min-width:0;
}
.uae-operations-section .vip-location-card{
overflow:visible;
grid-template-columns:minmax(300px, .9fr) minmax(0, 1.1fr);
}
.uae-operations-section .market-carousel,
.uae-operations-section .pending-photo{
overflow:hidden;
}
.uae-operations-section .location-content{
overflow:visible;
word-break:normal;
overflow-wrap:break-word;
}
.uae-operations-section .location-content ul{
width:100%;
}
.uae-operations-section .location-content li{
overflow:visible;
overflow-wrap:break-word;
hyphens:auto;
}
@media (max-width:1180px){
.uae-operations-section .vip-uae-layout{
grid-template-columns:1fr !important;
}
.uae-operations-section .vip-uae-layout .uae-map-card{
position:relative;
top:auto;
}
}
@media (max-width:860px){
.uae-operations-section .vip-location-card,
.uae-operations-section .waterfront-location-card{
grid-template-columns:1fr !important;
}
.uae-operations-section .location-content,
.uae-operations-section .waterfront-location-card .location-content{
min-height:0;
padding:22px;
}
.uae-operations-section .location-content ul,
.uae-operations-section .waterfront-location-card .location-content ul{
grid-template-columns:1fr;
}
}
/* ---------- UAE Presence desktop carousel overflow correction ---------- */
.uae-operations-section .vip-location-card,
.uae-operations-section .waterfront-location-card{
grid-template-columns:minmax(240px, 340px) minmax(390px, 1fr) !important;
overflow:hidden;
}
.uae-operations-section .location-photo,
.uae-operations-section .market-carousel,
.uae-operations-section .pending-photo{
width:100%;
max-width:100%;
min-width:0;
height:100%;
min-height:300px;
aspect-ratio:auto !important;
box-sizing:border-box;
}
.uae-operations-section .waterfront-slider{
min-height:320px;
}
.uae-operations-section .location-content,
.uae-operations-section .waterfront-location-card .location-content{
min-width:0;
min-height:300px;
padding:26px 28px;
}
@media (max-width:1450px){
.uae-operations-section .vip-uae-layout{
grid-template-columns:1fr !important;
}
.uae-operations-section .vip-uae-layout .uae-map-card{
position:relative;
top:auto;
}
.uae-operations-section .vip-location-card,
.uae-operations-section .waterfront-location-card{
grid-template-columns:minmax(260px, 360px) minmax(430px, 1fr) !important;
}
}
@media (max-width:900px){
.uae-operations-section .vip-location-card,
.uae-operations-section .waterfront-location-card{
grid-template-columns:1fr !important;
}
.uae-operations-section .location-photo,
.uae-operations-section .market-carousel,
.uae-operations-section .pending-photo{
height:auto;
min-height:260px;
aspect-ratio:16 / 10 !important;
}
.uae-operations-section .location-content,
.uae-operations-section .waterfront-location-card .location-content{
min-height:0;
}
}
/* ---------- Verified Evidence page ---------- */
.evidence-page{
background:#f7fbfc;
}
.evidence-hero{
background:
radial-gradient(circle at 18% 18%, rgba(41,231,255,0.16), transparent 0 28%, transparent 52%),
linear-gradient(180deg, #fafdff 0%, #eef8fa 55%, #f8fbfc 100%);
}
.evidence-notice-section{
padding:52px 0 20px;
}
.evidence-rule-banner{
display:grid;
grid-template-columns:auto 1fr;
gap:18px;
align-items:center;
padding:24px;
background:linear-gradient(135deg, rgba(255,255,255,0.96), rgba(236,250,252,0.92));
border-color:rgba(11,159,175,0.18);
box-shadow:0 18px 50px rgba(9,48,70,0.08);
}
.evidence-rule-banner i{
width:54px;
height:54px;
display:grid;
place-items:center;
border-radius:18px;
background:#e7f8fb;
color:#0b9faf;
font-size:22px;
}
.evidence-rule-banner span,
.evidence-card-top span,
.quality-badge,
.product-evidence-card span{
display:inline-flex;
color:#a47d23;
font-family:'JetBrains Mono', monospace;
font-size:11px;
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase;
}
.evidence-rule-banner p{
margin-top:6px;
color:#48677a;
}
.evidence-section{
background:#f8fbfc;
}
.evidence-company-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:18px;
}
.evidence-company-card{
padding:24px;
background:rgba(255,255,255,0.94);
border-color:rgba(12,53,80,0.1);
box-shadow:0 20px 54px rgba(9,48,70,0.08);
}
.evidence-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}
.evidence-card-top i{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:14px;
background:#edfafd;
color:#0b9faf;
}
.evidence-company-card h3,
.quality-feature-card h3,
.evidence-mini-card h3,
.facility-evidence-card h3,
.product-evidence-card h3,
.journey-evidence-step h3,
.download-resource-card h3,
.evidence-link-panel h3{
color:#082b43;
}
.evidence-company-card h3{
min-height:3.1em;
font-size:21px;
line-height:1.14;
}
.evidence-company-card dl{
display:grid;
gap:12px;
margin:20px 0;
}
.evidence-company-card dt{
color:#0b7786;
font-size:11px;
font-weight:850;
text-transform:uppercase;
letter-spacing:.08em;
}
.evidence-company-card dd{
margin:4px 0 0;
color:#567083;
font-size:13px;
line-height:1.45;
}
.evidence-action,
.download-resource-card button,
.download-resource-card a{
width:100%;
min-height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
text-align:center;
padding:10px 16px;
border:1px solid rgba(11,159,175,0.18);
border-radius:999px;
background:#f1fbfd;
color:#517084;
font-weight:800;
text-decoration:none;
}
.evidence-action.verified{
background:linear-gradient(135deg, #e7f8fb, #fff8e7);
border-color:rgba(11,159,175,0.26);
color:#0b7786;
}
.evidence-action.verified:hover,
.download-resource-card a:hover{
border-color:rgba(11,159,175,0.38);
background:linear-gradient(135deg, #ffffff, #e7f8fb);
color:#0b7786;
transform:translateY(-1px);
}
.quality-evidence-layout{
display:grid;
grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
gap:22px;
align-items:stretch;
}
.quality-feature-card{
padding:32px;
background:linear-gradient(145deg, #ffffff, #edfafd);
border-color:rgba(11,159,175,0.2);
box-shadow:0 22px 58px rgba(9,48,70,0.1);
}
.quality-feature-card h3{
margin-top:14px;
font-size:30px;
}
.quality-feature-card p{
margin-top:14px;
color:#506b7f;
}
.quality-fields{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;
margin:24px 0;
}
.quality-fields span{
min-height:46px;
display:flex;
align-items:center;
padding:10px 12px;
border-radius:14px;
background:rgba(255,255,255,0.78);
border:1px solid rgba(12,53,80,0.08);
color:#48677a;
font-size:13px;
font-weight:750;
}
.quality-secondary-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:16px;
}
.evidence-mini-card{
padding:22px;
background:rgba(255,255,255,0.94);
border-color:rgba(12,53,80,0.1);
}
.evidence-mini-card i{
width:44px;
height:44px;
display:grid;
place-items:center;
border-radius:15px;
background:#fff8e7;
color:#a47d23;
margin-bottom:16px;
}
.evidence-mini-card h3{
font-size:19px;
}
.evidence-mini-card p,
.facility-evidence-card p,
.product-evidence-card p,
.journey-evidence-step p,
.download-resource-card p,
.evidence-link-panel p{
margin-top:9px;
color:#557084;
}
.municipality-certificate-showcase{
margin-top:24px;
padding:24px;
display:grid;
grid-template-columns:minmax(0, 0.82fr) minmax(310px, 1.18fr);
gap:24px;
align-items:center;
border-color:rgba(196,154,58,0.25);
background:
linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,248,230,0.92)),
radial-gradient(circle at 88% 16%, rgba(245,197,66,0.24), transparent 34%);
box-shadow:0 24px 64px rgba(112,82,16,0.12);
}
.municipality-certificate-copy h3{
margin:16px 0 10px;
color:#0b2538;
font-size:clamp(26px, 3vw, 42px);
line-height:1.05;
}
.municipality-certificate-copy p{
color:#557084;
line-height:1.65;
max-width:560px;
}
.municipality-certificate-copy .quality-fields{
margin:18px 0;
}
.municipality-certificate-image{
display:block;
padding:12px;
border-radius:22px;
background:
linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,248,230,0.9));
border:1px solid rgba(196,154,58,0.2);
box-shadow:0 20px 48px rgba(7,39,58,0.11);
}
.municipality-certificate-image img{
display:block;
width:100%;
max-height:680px;
object-fit:contain;
border-radius:16px;
background:#fff;
}
.facility-gallery-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:18px;
}
.facility-evidence-card{
min-height:330px;
display:flex;
flex-direction:column;
padding:16px;
border-radius:22px;
background:#fff;
border:1px solid rgba(12,53,80,0.1);
box-shadow:0 20px 54px rgba(9,48,70,0.08);
}
.facility-photo-placeholder{
min-height:190px;
display:grid;
place-items:center;
border-radius:17px;
background:
linear-gradient(135deg, rgba(11,159,175,0.12), rgba(245,197,66,0.11)),
linear-gradient(180deg, #fafdff, #edf7f9);
border:1px dashed rgba(11,159,175,0.28);
color:#0b9faf;
font-size:34px;
}
.facility-evidence-card.verified-photo img{
width:100%;
aspect-ratio:16 / 11;
object-fit:cover;
border-radius:17px;
border:1px solid rgba(12,53,80,0.1);
background:#edf7f9;
}
.facility-evidence-card.verified-photo img[src*="assets/evidence/outlets/"],
.facility-evidence-card.verified-photo img[src*="assets/evidence/framed/"],
.facility-evidence-card.verified-photo img[src*="rsa-cold-chain-partner-facility"]{
object-fit:contain;
object-position:center center;
background:
linear-gradient(135deg, rgba(255,255,255,0.96), rgba(236,249,251,0.96)),
#edf7f9;
}
.facility-evidence-card h3{
margin:18px 4px 0;
font-size:21px;
}
.facility-evidence-card p{
margin-left:4px;
margin-right:4px;
}
.evidence-pending-strip{
margin-top:24px;
padding:20px 22px;
display:grid;
gap:7px;
background:rgba(255,255,255,0.92);
border-color:rgba(11,159,175,0.14);
}
.evidence-pending-strip span{
color:#a47d23;
font-family:'JetBrains Mono', monospace;
font-size:11px;
font-weight:850;
letter-spacing:.1em;
text-transform:uppercase;
}
.evidence-pending-strip p{
color:#557084;
}
.product-evidence-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:16px;
}
.product-evidence-card{
padding:24px;
background:rgba(255,255,255,0.94);
border-color:rgba(12,53,80,0.1);
box-shadow:0 18px 48px rgba(9,48,70,0.07);
}
.product-evidence-card h3{
margin-top:14px;
font-size:21px;
}
.evidence-link-panel{
margin-top:26px;
padding:24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
background:linear-gradient(135deg, rgba(255,255,255,0.96), rgba(236,250,252,0.92));
border-color:rgba(11,159,175,0.18);
}
.journey-evidence-track{
display:grid;
grid-template-columns:repeat(6, minmax(0, 1fr));
gap:12px;
}
.journey-evidence-step{
position:relative;
min-height:220px;
padding:22px;
border-radius:22px;
background:linear-gradient(180deg, #ffffff, #eef8fa);
border:1px solid rgba(12,53,80,0.1);
box-shadow:0 18px 48px rgba(9,48,70,0.07);
}
.journey-evidence-step span{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:14px;
background:#082b43;
color:#7fe7ff;
font-family:'JetBrains Mono', monospace;
font-weight:900;
margin-bottom:28px;
}
.journey-evidence-step h3{
font-size:18px;
}
.download-resource-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:16px;
}
.download-resource-card{
padding:24px;
background:rgba(255,255,255,0.94);
border-color:rgba(12,53,80,0.1);
box-shadow:0 18px 48px rgba(9,48,70,0.07);
}
.download-resource-card i{
width:48px;
height:48px;
display:grid;
place-items:center;
border-radius:16px;
background:#edfafd;
color:#0b9faf;
margin-bottom:18px;
font-size:20px;
}
.download-resource-card h3{
min-height:2.4em;
font-size:20px;
}
.download-resource-card button,
.download-resource-card a{
margin-top:20px;
}
@media (max-width:1100px){
.evidence-company-grid,
.product-evidence-grid,
.download-resource-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.facility-gallery-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.journey-evidence-track{
grid-template-columns:repeat(3, minmax(0, 1fr));
}
}
@media (max-width:820px){
.evidence-rule-banner,
.quality-evidence-layout,
.evidence-link-panel{
grid-template-columns:1fr;
}
.evidence-link-panel{
align-items:flex-start;
flex-direction:column;
}
.evidence-link-panel .btn{
width:100%;
}
}
@media (max-width:640px){
.evidence-company-grid,
.quality-secondary-grid,
.facility-gallery-grid,
.product-evidence-grid,
.journey-evidence-track,
.download-resource-grid,
.quality-fields{
grid-template-columns:1fr;
}
.evidence-company-card h3,
.download-resource-card h3{
min-height:0;
}
.quality-feature-card{
padding:24px;
}
.quality-feature-card h3{
font-size:25px;
}
.facility-evidence-card{
min-height:0;
}
}
/* ---------- Premium Explore Navigation ---------- */
.nav-dropdown{
isolation:isolate;
}
.nav-dropdown-toggle{
min-height:38px;
padding:0 13px;
border:1px solid rgba(11,159,175,0.18);
border-radius:999px;
background:linear-gradient(135deg, rgba(255,255,255,0.96), rgba(237,250,253,0.92));
box-shadow:0 8px 22px rgba(9,48,70,0.06);
color:#0a3048;
font-weight:800;
letter-spacing:0;
}
.nav-dropdown-toggle::before{
content:"\f14e";
font-family:"Font Awesome 6 Free";
font-weight:900;
width:24px;
height:24px;
display:grid;
place-items:center;
border-radius:50%;
background:linear-gradient(135deg, rgba(11,159,175,0.14), rgba(196,154,58,0.13));
color:#0b7786;
font-size:12px;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown.open .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle{
border-color:rgba(11,159,175,0.34);
background:linear-gradient(135deg, #ffffff, #e9fbfd);
color:#07526a;
box-shadow:0 14px 34px rgba(9,48,70,0.12);
transform:translateY(-1px);
}
.nav-dropdown.open .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle{
background:linear-gradient(135deg, #073047, #0b7786);
border-color:rgba(196,154,58,0.34);
color:#ffffff;
}
.nav-dropdown.open .nav-dropdown-toggle::before,
.nav-dropdown:focus-within .nav-dropdown-toggle::before{
background:rgba(255,255,255,0.14);
color:#d8faff;
}
.nav-dropdown-toggle:focus-visible,
.nav-dropdown-menu a:focus-visible,
.mobile-menu-group summary:focus-visible,
.mobile-menu a:focus-visible{
outline:3px solid rgba(196,154,58,0.45);
outline-offset:3px;
}
.nav-dropdown-menu{
width:720px;
max-width:min(92vw, 720px);
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:12px;
padding:16px;
border-radius:24px;
border:1px solid rgba(11,159,175,0.18);
background:
linear-gradient(135deg, rgba(255,255,255,0.98), rgba(240,251,253,0.98)),
radial-gradient(circle at top left, rgba(41,231,255,0.12), transparent 38%);
box-shadow:0 28px 72px rgba(6,31,48,0.17);
transform:translate(-50%,12px);
transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
visibility:hidden;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu{
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
transform:translate(-50%,0) !important;
}
.nav-menu-group{
gap:9px;
padding:4px;
border-radius:18px;
background:rgba(255,255,255,0.52);
}
.nav-menu-group span{
display:flex;
align-items:center;
gap:8px;
padding:4px 8px 2px;
color:#7a6327;
}
.nav-menu-group span::before{
content:"";
width:7px;
height:7px;
border-radius:50%;
background:#0b9faf;
box-shadow:0 0 0 4px rgba(11,159,175,0.12);
}
.nav-menu-group a{
position:relative;
min-height:72px;
display:grid;
grid-template-columns:32px 1fr 16px;
grid-template-rows:auto auto;
align-content:center;
column-gap:10px;
padding:12px 10px;
border:1px solid rgba(12,53,80,0.08);
border-radius:16px;
background:rgba(255,255,255,0.82);
box-shadow:0 10px 26px rgba(9,48,70,0.05);
color:#082b43;
line-height:1.2;
white-space:normal !important;
overflow:hidden;
transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-menu-group a::before{
grid-row:1 / span 2;
width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:12px;
background:#edfafd;
color:#0b7786;
font-family:"Font Awesome 6 Free";
font-weight:900;
font-size:13px;
}
.nav-menu-group a::after{
content:"\f061";
position:static;
grid-column:3;
grid-row:1 / span 2;
align-self:center;
width:auto;
height:auto;
background:none;
font-family:"Font Awesome 6 Free";
font-weight:900;
color:#a98225;
font-size:12px;
opacity:.76;
transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-menu-group a .nav-helper{
grid-column:2;
display:block;
max-width:100%;
margin-top:4px;
color:#5c7382;
font-family:'Inter', sans-serif;
font-size:11.5px;
font-weight:600;
line-height:1.35;
letter-spacing:0;
text-transform:none;
white-space:normal;
overflow-wrap:break-word;
}
.nav-menu-group a:hover,
.nav-menu-group a:focus-visible,
.nav-menu-group a[aria-current="page"]{
transform:translateY(-2px);
border-color:rgba(11,159,175,0.24);
background:linear-gradient(135deg, #ffffff, #edfafd);
box-shadow:0 16px 34px rgba(9,48,70,0.1);
color:#07526a;
}
.nav-menu-group a:hover::after,
.nav-menu-group a:focus-visible::after{
opacity:1;
transform:translateX(2px);
}
.nav-menu-group a.nav-b2b-menu-link{
border-color:rgba(196,154,58,0.34);
background:
linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,248,226,0.92)),
radial-gradient(circle at top left, rgba(216,176,77,0.16), transparent 42%);
}
.nav-menu-group a.nav-b2b-menu-link::before{
background:#fff4cf;
color:#9a7419;
}
.nav-menu-group a.nav-b2b-menu-link em{
margin-left:6px;
vertical-align:middle;
}
.nav-menu-group a[href*="our-ecosystem"]::before{ content:"\f1b3"; }
.nav-menu-group a[href*="b2b-imports"]::before{ content:"\f468"; }
.nav-menu-group a[href*="uae-presence"]::before{ content:"\f3c5"; }
.nav-menu-group a[href*="verified-evidence"]::before{ content:"\f058"; }
.nav-menu-group a[href*="wholesale-b2b"]::before{ content:"\f0b1"; }
.nav-menu-group a[href*="seafood-portfolio"]::before{ content:"\f578"; }
.nav-menu-group a[href*="global-sourcing"]::before{ content:"\f57d"; }
.nav-menu-group a[href*="become-a-supplier"]::before{ content:"\f4c0"; }
.mobile-menu-group{
border-color:rgba(11,159,175,0.18);
background:linear-gradient(135deg, rgba(255,255,255,0.96), rgba(237,250,253,0.94));
}
.mobile-menu{
z-index:5900;
}
.mobile-menu-group summary{
color:#073047;
}
.mobile-menu-group summary::before{
content:"\f14e";
font-family:"Font Awesome 6 Free";
font-weight:900;
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:50%;
margin-right:4px;
background:rgba(11,159,175,0.12);
color:#0b7786;
}
.mobile-menu-group summary{
justify-content:flex-start;
}
.mobile-menu-group summary i{
margin-left:auto;
}
.mobile-menu-group a{
position:relative;
padding:13px 18px 13px 52px;
background:rgba(255,255,255,0.72);
color:#173f56;
}
.mobile-menu-group a::before{
content:"\f105";
font-family:"Font Awesome 6 Free";
font-weight:900;
position:absolute;
left:24px;
top:50%;
transform:translateY(-50%);
color:#0b9faf;
}
.mobile-menu-group a:hover,
.mobile-menu-group a:focus-visible,
.mobile-menu-group a[aria-current="page"]{
background:#edfafd;
color:#07526a;
}
.mobile-b2b-link{
display:flex !important;
align-items:center;
gap:10px;
border:1px solid rgba(196,154,58,0.42) !important;
background:linear-gradient(135deg, #06263b, #0b8ea0) !important;
color:#ffffff !important;
box-shadow:0 16px 34px rgba(6,31,48,0.16);
}
.mobile-b2b-link i{
color:#d8b04d;
}
.mobile-b2b-link span{
flex:1;
}
.mobile-b2b-link em{
margin-left:auto;
}
@media (max-width:1180px){
.site-nav-links{
gap:14px;
}
.nav-dropdown-menu{
width:660px;
}
.nav-menu-group a{
min-height:68px;
}
.nav-menu-group a .nav-helper{
display:none;
}
.municipality-certificate-showcase{
grid-template-columns:1fr;
}
}
@media (max-width:1180px){
.mobile-menu{
justify-content:flex-start;
overflow-y:auto;
}
}
@media (max-width:640px){
.mobile-menu{
padding-top:92px;
}
.mobile-menu > a,
.mobile-menu-group{
width:min(390px, 100%);
border-radius:18px;
}
.mobile-b2b-link{
display:flex !important;
align-items:center;
gap:10px;
border:1px solid rgba(196,154,58,0.42) !important;
background:linear-gradient(135deg, #06263b, #0b8ea0) !important;
color:#ffffff !important;
box-shadow:0 16px 34px rgba(6,31,48,0.16);
}
.mobile-b2b-link i{
color:#d8b04d;
}
.mobile-b2b-link span{
flex:1;
}
.mobile-b2b-link em{
margin-left:auto;
}
.municipality-certificate-showcase{
padding:18px;
border-radius:20px;
}
.municipality-certificate-copy h3{
font-size:28px;
}
.municipality-certificate-image{
padding:8px;
border-radius:18px;
}
.municipality-certificate-image img{
max-height:none;
border-radius:13px;
}
}
@media (prefers-reduced-motion: reduce){
.nav-dropdown-toggle,
.nav-dropdown-toggle i,
.nav-dropdown-menu,
.nav-menu-group a,
.nav-menu-group a::after,
.mobile-menu,
.mobile-menu-group summary i{
transition:none !important;
}
}
/* Premium Global Sourcing country selector */
.global-sourcing-section .sourcing-network{
grid-template-columns:170px 1fr;
align-items:stretch;
gap:22px;
padding:24px;
background:
linear-gradient(135deg, rgba(255,255,255,0.96), rgba(236,249,251,0.95)),
radial-gradient(circle at 92% 12%, rgba(142,238,255,0.2), transparent 32%);
border-color:rgba(11,159,175,0.16);
box-shadow:0 24px 58px rgba(7,39,58,0.11);
}
.global-sourcing-section .sourcing-core{
width:100%;
height:auto;
min-height:100%;
border-radius:22px;
flex-direction:column;
gap:9px;
padding:22px 14px;
background:
linear-gradient(160deg, #083652, #0b9faf),
radial-gradient(circle at 50% 0%, rgba(255,255,255,0.26), transparent 42%);
color:#fff;
box-shadow:0 18px 42px rgba(11,159,175,0.18);
}
.global-sourcing-section .sourcing-core img{
width:50px;
height:34px;
border-radius:8px;
object-fit:cover;
box-shadow:0 10px 22px rgba(0,0,0,0.16);
}
.global-sourcing-section .sourcing-core span{
font-size:30px;
line-height:1;
}
.global-sourcing-section .sourcing-core small{
color:rgba(241,251,253,0.82);
font:700 12px/1.2 'Inter', sans-serif;
}
.global-sourcing-section .sourcing-chips{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:12px;
align-content:stretch;
}
.global-sourcing-section .country-selector button{
position:relative;
min-height:120px;
height:120px;
width:100%;
display:grid;
grid-template-columns:42px minmax(0,1fr) 28px;
align-items:center;
gap:12px;
padding:13px;
border-radius:18px;
border:1px solid rgba(11,159,175,0.16);
background:linear-gradient(180deg, #ffffff, #f4fbfc);
color:#12384f;
box-shadow:0 12px 30px rgba(7,39,58,0.06);
text-align:left;
transition:transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.global-sourcing-section .country-selector button::after{
content:"";
position:absolute;
inset:auto 14px 10px 58px;
height:3px;
border-radius:999px;
background:linear-gradient(90deg, #0b9faf, #d7a93d);
opacity:0;
transform:scaleX(0.35);
transform-origin:left;
transition:0.22s ease;
}
.global-sourcing-section .country-selector button img{
width:42px;
height:29px;
border-radius:8px;
object-fit:cover;
box-shadow:0 8px 18px rgba(7,39,58,0.12);
transition:transform 0.22s ease;
}
.global-sourcing-section .country-selector button span{
display:grid;
gap:5px;
min-width:0;
}
.global-sourcing-section .country-selector button b{
color:#0b2538;
font:800 15px/1.1 'Space Grotesk', sans-serif;
white-space:normal;
}
.global-sourcing-section .country-selector button small{
color:#547085;
font:700 11.5px/1.2 'Inter', sans-serif;
}
.global-sourcing-section .country-selector button i{
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:50%;
background:#eefbfc;
color:#0b8795;
font-size:12px;
}
.global-sourcing-section .country-selector button:hover,
.global-sourcing-section .country-selector button:focus-visible{
transform:translateY(-2px);
border-color:rgba(11,159,175,0.36);
box-shadow:0 18px 42px rgba(7,39,58,0.11);
background:linear-gradient(180deg, #ffffff, #ecfbfd);
outline:none;
}
.global-sourcing-section .country-selector button:hover img,
.global-sourcing-section .country-selector button:focus-visible img{
transform:translateY(-1px);
}
.global-sourcing-section .country-selector button.active{
color:#0a3046;
background:linear-gradient(135deg, #e9fbfd, #fff8e6);
border-color:rgba(11,159,175,0.46);
box-shadow:0 20px 48px rgba(7,39,58,0.13);
}
.global-sourcing-section .country-selector button.active::after{
opacity:1;
transform:scaleX(1);
}
.global-sourcing-section .country-selector button.major::before{
content:"Major";
position:absolute;
top:9px;
right:11px;
padding:3px 7px;
border-radius:999px;
background:rgba(215,169,61,0.14);
color:#876327;
font:800 9.5px/1 'Inter', sans-serif;
}
.sourcing-detail-title{
display:flex;
align-items:center;
gap:13px;
margin-top:8px;
}
.sourcing-detail-title img{
width:52px;
height:36px;
object-fit:cover;
border-radius:9px;
box-shadow:0 10px 24px rgba(7,39,58,0.13);
}
.sourcing-detail-title h3{
margin:0;
}
.sourcing-market-label{
display:inline-flex;
align-items:center;
min-height:30px;
margin-top:12px;
padding:7px 11px;
border-radius:999px;
background:#fff6df;
border:1px solid rgba(196,154,58,0.22);
color:#8c6c2b;
font:800 12px/1 'Inter', sans-serif;
}
.sourcing-detail-panel{
transition:opacity 0.22s ease, transform 0.22s ease;
}
.sourcing-detail-panel.is-switching{
opacity:0.42;
transform:translateY(5px);
}
@media (max-width:1180px){
.global-sourcing-section .sourcing-chips{
grid-template-columns:repeat(2, minmax(0,1fr));
}
}
@media (max-width:768px){
.global-sourcing-section .sourcing-network{
grid-template-columns:1fr;
padding:18px;
}
.global-sourcing-section .sourcing-core{
min-height:96px;
flex-direction:row;
justify-content:flex-start;
padding:16px;
}
.global-sourcing-section .sourcing-core span{
font-size:24px;
}
.global-sourcing-section .sourcing-chips{
display:flex;
flex-wrap:nowrap;
overflow-x:auto;
gap:10px;
padding:2px 2px 12px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
.global-sourcing-section .country-selector button{
min-width:235px;
height:auto;
min-height:78px;
scroll-snap-align:start;
}
.global-sourcing-section .country-selector button b{
font-size:14px;
}
.sourcing-detail-title{
align-items:flex-start;
}
.sourcing-detail-title h3{
font-size:30px;
}
}
@media (max-width:430px){
.global-sourcing-section .sourcing-core{
border-radius:18px;
}
.global-sourcing-section .country-selector button{
min-width:218px;
grid-template-columns:38px minmax(0,1fr) 26px;
gap:10px;
padding:12px;
border-radius:16px;
}
.global-sourcing-section .country-selector button img{
width:38px;
height:27px;
}
.global-sourcing-section .country-selector button small{
font-size:11px;
}
.sourcing-detail-title img{
width:46px;
height:32px;
}
}
@media (prefers-reduced-motion: reduce){
.global-sourcing-section .country-selector button,
.global-sourcing-section .country-selector button::after,
.global-sourcing-section .country-selector button img,
.sourcing-detail-panel{
transition:none !important;
}
}
/* Final readability pass: leadership actions and global sourcing supply cards */
.leadership-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:24px;
}
.global-sourcing-section .sourcing-network-title{
max-width:900px;
margin:34px auto 24px;
padding:24px 22px;
border-radius:24px;
background:
linear-gradient(135deg, rgba(255,255,255,0.98), rgba(232,249,252,0.96)),
radial-gradient(circle at 86% 0%, rgba(215,169,61,0.16), transparent 34%);
border:1px solid rgba(11,159,175,0.16);
box-shadow:0 22px 54px rgba(7,39,58,0.14);
}
.global-sourcing-section .sourcing-network-title span{
color:#0b8795;
background:rgba(11,159,175,0.09);
border-color:rgba(11,159,175,0.18);
}
.global-sourcing-section .sourcing-network-title h3{
color:#0b2538;
text-shadow:none;
}
.global-sourcing-section > .container > .section-head h2{
color:#0b2538;
text-shadow:none;
}
.global-sourcing-section > .container > .section-head p{
color:#31556b;
}
.global-sourcing-section > .container > .section-head .eyebrow{
color:#0b8795;
background:rgba(11,159,175,0.09);
border-color:rgba(11,159,175,0.18);
}
.global-sourcing-section .sourcing-market-grid{
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:18px;
}
.global-sourcing-section .sourcing-market-card{
min-height:220px;
display:flex;
flex-direction:column;
justify-content:flex-end;
gap:10px;
padding:22px;
overflow:hidden;
background:
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(238,251,252,0.96)),
radial-gradient(circle at 88% 0%, rgba(41,231,255,0.2), transparent 36%);
border:1px solid rgba(11,159,175,0.18);
box-shadow:0 18px 46px rgba(7,39,58,0.12);
}
.global-sourcing-section .sourcing-market-card::before{
content:"";
position:absolute;
inset:0 0 auto 0;
height:6px;
background:linear-gradient(90deg, #0b9faf, #d7a93d);
}
.global-sourcing-section .sourcing-market-card::after{
inset:auto 18px 18px auto;
width:74px;
height:74px;
border-radius:50%;
background:radial-gradient(circle, rgba(11,159,175,0.12), rgba(11,159,175,0));
border:0;
}
.global-sourcing-section .sourcing-market-card > img{
position:absolute;
top:18px;
right:18px;
z-index:1;
width:58px;
height:40px;
object-fit:cover;
border-radius:10px;
box-shadow:0 10px 22px rgba(7,39,58,0.14);
}
.global-sourcing-section .sourcing-market-card span{
width:max-content;
padding:8px 11px;
color:#fff;
background:linear-gradient(135deg, #083652, #0b9faf);
border-color:rgba(255,255,255,0.32);
box-shadow:0 12px 24px rgba(7,39,58,0.12);
}
.global-sourcing-section .sourcing-market-card h4{
color:#0b2538;
text-shadow:none;
}
.global-sourcing-section .sourcing-market-card p{
color:#31556b;
font-weight:700;
}
.global-sourcing-section .sourcing-market-card.highlight{
background:
linear-gradient(180deg, #fff9e9, #edfbfd),
radial-gradient(circle at 88% 0%, rgba(215,169,61,0.22), transparent 38%);
border-color:rgba(215,169,61,0.34);
box-shadow:0 22px 52px rgba(123,88,20,0.12);
}
.global-sourcing-section .sourcing-market-card.hub{
background:
linear-gradient(180deg, #eafcff, #ffffff),
radial-gradient(circle at 88% 0%, rgba(11,159,175,0.22), transparent 38%);
}
.global-sourcing-section .sourcing-capability-grid,
.global-sourcing-section .sourcing-country-grid{
color:#0b2538;
}
.global-sourcing-section .sourcing-country-card,
.global-sourcing-section .sourcing-headline-card,
.global-sourcing-section .sourcing-totals,
.global-sourcing-section .sourcing-product-list{
background:rgba(255,255,255,0.96);
border-color:rgba(11,159,175,0.14);
box-shadow:0 18px 45px rgba(7,39,58,0.1);
}
.global-sourcing-section .sourcing-country-card h4,
.global-sourcing-section .sourcing-headline-card h3,
.global-sourcing-section .sourcing-product-list h4{
color:#0b2538;
}
.global-sourcing-section .sourcing-country-card p,
.global-sourcing-section .sourcing-country-card li,
.global-sourcing-section .sourcing-headline-card p,
.global-sourcing-section .sourcing-product-list p,
.global-sourcing-section .sourcing-product-list li{
color:#36576a;
}
.global-sourcing-section .sourcing-country-card b,
.global-sourcing-section .sourcing-product-list b{
color:#0b2538;
}
@media (max-width:1180px){
.global-sourcing-section .sourcing-market-grid{
grid-template-columns:repeat(3, minmax(0, 1fr));
}
}
@media (max-width:768px){
.global-sourcing-section .sourcing-market-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.global-sourcing-section .sourcing-market-card{
min-height:190px;
padding:18px;
}
}
@media (max-width:430px){
.global-sourcing-section .sourcing-market-grid{
grid-template-columns:1fr;
}
.global-sourcing-section .sourcing-market-card{
min-height:170px;
}
}
/* Homepage hero copy and CTA refinement */
#home .hero-slide-content{
align-items:center;
text-align:center;
max-width:min(900px, 100%);
margin:0 auto;
}
#home .hero-slide-content .eyebrow{
justify-content:center;
}
#home .hero-slide-content h1,
#home .hero-slide-content .hero-heading{
max-width:900px;
margin-left:auto;
margin-right:auto;
}
#home .hero-slide-content p{
max-width:620px !important;
margin-left:auto;
margin-right:auto;
}
#home .hero-value-points{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-top:22px;
max-width:760px;
}
#home .hero-value-points span{
min-height:38px;
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 13px;
border-radius:999px;
background:rgba(255,255,255,0.14);
border:1px solid rgba(255,255,255,0.22);
color:rgba(244,250,253,0.94);
font:800 12px/1 'Inter', sans-serif;
box-shadow:0 12px 26px rgba(0,0,0,0.12);
backdrop-filter:blur(12px);
}
#home .hero-value-points i{
color:#9ce9ef;
}
#home .hero-actions{
justify-content:center;
width:100%;
}
#home .hero-actions .btn{
min-height:54px;
padding:0 22px;
border-radius:999px;
font-weight:850;
}
#home .hero-actions .btn-primary{
background:linear-gradient(135deg, #19c7d5, #0b9faf);
color:#082b43;
box-shadow:0 18px 38px rgba(11,159,175,0.22);
}
#home .hero-actions .btn-ghost{
background:rgba(255,255,255,0.9);
color:#0b2538;
border-color:rgba(255,255,255,0.7);
box-shadow:0 18px 38px rgba(0,0,0,0.12);
}
#home .hero-actions .btn:hover,
#home .hero-actions .btn:focus-visible{
transform:translateY(-2px);
}
@media (max-width:768px){
#home .hero-value-points{
gap:8px;
margin-top:18px;
}
#home .hero-value-points span{
min-height:34px;
padding:8px 10px;
font-size:11px;
}
#home .hero-actions{
margin-top:24px !important;
}
}
@media (max-width:576px){
#home .hero-value-points{
display:grid;
grid-template-columns:1fr;
width:100%;
max-width:300px;
margin-left:auto;
margin-right:auto;
}
#home .hero-value-points span{
justify-content:center;
}
}
/* Our Story narrative upgrade */
.about-page .about-story-narrative{
max-width:1120px;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:26px;
border:1px solid rgba(41,231,255,0.16);
background:
linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)),
radial-gradient(circle at 8% 12%, rgba(41,231,255,0.12), transparent 34%);
}
.about-page .about-story-narrative h3{
color:#ffffff;
}
.about-page .about-story-narrative > div{
padding:20px;
border-radius:18px;
background:rgba(2,18,32,0.34);
border:1px solid rgba(255,255,255,0.1);
}
.about-page .about-story-narrative p{
color:rgba(248,252,255,0.94);
font-weight:600;
text-shadow:0 1px 1px rgba(0,0,0,0.24);
}
.about-page .about-story-narrative p + p{
margin-top:14px;
}
.story-proof-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:16px;
max-width:1120px;
margin:24px auto 0;
}
.story-proof-grid article{
min-height:220px;
padding:24px;
border:1px solid rgba(41,231,255,0.14);
border-radius:22px;
background:
linear-gradient(180deg, rgba(7,39,58,0.82), rgba(12,28,53,0.78)),
radial-gradient(circle at 88% 8%, rgba(215,169,61,0.16), transparent 34%);
box-shadow:0 18px 46px rgba(0,0,0,0.18);
}
.story-proof-grid i{
width:44px;
height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:16px;
color:#9ce9ef;
background:rgba(41,231,255,0.1);
border:1px solid rgba(41,231,255,0.18);
}
.story-proof-grid h3{
margin-top:18px;
margin-bottom:10px;
color:#ffffff;
font-size:19px;
}
.story-proof-grid p{
color:rgba(235,247,255,0.72);
font-size:14px;
line-height:1.65;
}
.story-direction-card{
background:
linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)),
radial-gradient(circle at 88% 0%, rgba(41,231,255,0.14), transparent 32%);
}
.about-page .about-hero-panel .about-stat strong{
max-width:100%;
margin-top:10px;
font-size:clamp(26px, 3.4vw, 38px);
line-height:1.12;
letter-spacing:0;
}
.about-page .about-hero-panel .about-stat p{
margin-top:12px;
color:rgba(235,247,255,0.72);
}
.about-page .about-hero-panel .about-stat-grid strong{
font-size:clamp(22px, 2.5vw, 30px);
}
@media (max-width:980px){
.story-proof-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}
@media (max-width:680px){
.about-page .about-story-narrative,
.story-proof-grid{
grid-template-columns:1fr;
}
.story-proof-grid article{
min-height:0;
}
}
/* ---------- B2B Imports Module ---------- */
.b2b-imports-page{
background:#f5f8fb;
color:#0a2034;
}
.b2b-imports-hero{
position:relative;
overflow:hidden;
padding:142px 0 72px;
background:
linear-gradient(118deg, rgba(6,18,38,0.94) 0%, rgba(7,42,66,0.9) 48%, rgba(245,248,251,0.96) 48.2%, rgba(255,255,255,0.98) 100%);
}
.b2b-imports-hero::after{
content:"";
position:absolute;
inset:auto -12% -34% 28%;
height:260px;
background:radial-gradient(circle, rgba(39,196,222,0.18), transparent 66%);
pointer-events:none;
}
.b2b-imports-hero-grid{
display:grid;
grid-template-columns:minmax(0, .9fr) minmax(360px, 1.1fr);
gap:42px;
align-items:center;
position:relative;
z-index:1;
}
.b2b-imports-hero h1{
margin:18px 0 18px;
color:#ffffff;
font-size:clamp(44px, 6.4vw, 82px);
line-height:0.98;
letter-spacing:0;
}
.b2b-imports-hero p{
max-width:660px;
color:rgba(236,249,255,0.88);
font-size:18px;
line-height:1.72;
}
.b2b-imports-hero .btn-ghost{
color:#ffffff;
border-color:rgba(255,255,255,0.28);
}
.b2b-access-note{
display:flex;
align-items:center;
gap:12px;
max-width:620px;
margin-top:24px;
padding:14px 16px;
border-radius:16px;
color:#eaf8ff;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.14);
}
.b2b-access-note i{ color:#d6ad48; }
.b2b-hero-visual{
position:relative;
min-height:500px;
border-radius:28px;
overflow:hidden;
box-shadow:0 28px 80px rgba(9,28,48,0.26);
}
.b2b-hero-visual img{
width:100%;
height:100%;
min-height:500px;
object-fit:cover;
display:block;
}
.b2b-hero-panel{
position:absolute;
left:22px;
right:22px;
bottom:22px;
padding:22px;
border-radius:20px;
color:#ffffff;
background:linear-gradient(135deg, rgba(5,18,35,0.86), rgba(8,55,77,0.78));
border:1px solid rgba(255,255,255,0.18);
backdrop-filter:blur(12px);
}
.b2b-hero-panel strong{
display:block;
margin:8px 0;
font-size:24px;
}
.b2b-hero-panel p{
color:rgba(237,250,255,0.78);
font-size:14px;
margin:0;
}
.b2b-imports-section{
padding:72px 0;
position:relative;
}
.b2b-dashboard-band{
background:#ffffff;
}
.b2b-section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:28px;
}
.b2b-section-head h2,
.b2b-reserve-grid h2{
margin:10px 0 0;
color:#09233a;
font-size:clamp(28px, 4vw, 46px);
line-height:1.08;
}
.b2b-section-head p,
.b2b-reserve-grid p{
max-width:680px;
color:#587184;
line-height:1.7;
}
.b2b-dashboard-grid{
display:grid;
grid-template-columns:repeat(6, minmax(0, 1fr));
gap:14px;
}
.b2b-dashboard-grid article{
padding:20px;
border-radius:20px;
background:linear-gradient(180deg, #ffffff, #f2f9fc);
border:1px solid rgba(8,58,86,0.1);
box-shadow:0 14px 34px rgba(10,45,70,0.08);
}
.b2b-dashboard-grid span,
.b2b-dashboard-grid small{
display:block;
color:#607487;
}
.b2b-dashboard-grid strong{
display:block;
margin:10px 0 4px;
color:#09233a;
font-size:30px;
letter-spacing:0;
}
.b2b-tabs{
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end;
}
.b2b-tabs button{
border:1px solid rgba(11,78,105,0.16);
background:#ffffff;
color:#17344a;
border-radius:999px;
padding:10px 14px;
font-weight:800;
cursor:pointer;
}
.b2b-tabs button.active{
background:#09233a;
color:#ffffff;
border-color:#09233a;
}
.b2b-container-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:22px;
}
.b2b-container-card{
border-radius:24px;
overflow:hidden;
background:#ffffff;
border:1px solid rgba(8,58,86,0.12);
box-shadow:0 18px 44px rgba(10,45,70,0.12);
}
.b2b-container-card.is-hidden{ display:none; }
.b2b-card-media{
position:relative;
aspect-ratio:1.55/1;
background:#d8e9ef;
}
.b2b-card-media img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.b2b-status{
position:absolute;
left:16px;
top:16px;
border-radius:999px;
padding:8px 12px;
color:#09233a;
background:#ffffff;
font-size:12px;
font-weight:900;
box-shadow:0 8px 20px rgba(0,0,0,0.12);
}
.b2b-status.onway{ color:#075d75; }
.b2b-status.preparation{ color:#7a5211; }
.b2b-status.arriving{ color:#0b6d3e; }
.b2b-card-body{
padding:20px;
}
.b2b-route{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
color:#0e8da5;
font-weight:900;
font-size:13px;
text-transform:uppercase;
letter-spacing:.08em;
}
.b2b-card-body h3{
margin:12px 0 16px;
color:#09233a;
font-size:22px;
line-height:1.18;
}
.b2b-meta-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;
margin:0;
}
.b2b-meta-grid div{
padding:10px;
border-radius:14px;
background:#f4f8fb;
}
.b2b-meta-grid dt{
color:#718394;
font-size:11px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.b2b-meta-grid dd{
margin:4px 0 0;
color:#17344a;
font-weight:800;
}
.b2b-progress{
height:9px;
margin:18px 0 14px;
border-radius:999px;
background:#dfeaf0;
overflow:hidden;
}
.b2b-progress span{
display:block;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg, #0fa7bd, #d6ad48);
}
.b2b-qty{
display:flex;
gap:10px;
flex-wrap:wrap;
color:#5d7181;
font-size:13px;
}
.b2b-qty b{
color:#09233a;
}
.b2b-card-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:18px;
}
.b2b-detail-grid{
display:grid;
grid-template-columns:minmax(0, 1.08fr) minmax(320px, .92fr);
gap:26px;
align-items:stretch;
}
.b2b-map-panel{
min-height:390px;
border-radius:26px;
padding:28px;
background:
radial-gradient(circle at 18% 68%, rgba(15,167,189,0.22), transparent 16%),
radial-gradient(circle at 78% 28%, rgba(214,173,72,0.18), transparent 16%),
linear-gradient(135deg, #ffffff, #eaf5f8);
border:1px solid rgba(8,58,86,0.12);
box-shadow:0 18px 48px rgba(10,45,70,0.12);
}
.b2b-map-caption{
display:flex;
flex-direction:column;
gap:6px;
}
.b2b-map-caption span{
color:#0f8ea5;
font-weight:900;
text-transform:uppercase;
letter-spacing:.12em;
}
.b2b-map-caption strong{
color:#09233a;
font-size:28px;
}
.b2b-map-caption small{
color:#697d8c;
}
.b2b-map-line{
position:relative;
height:180px;
margin:40px 0 22px;
}
.b2b-map-line::before{
content:"";
position:absolute;
left:8%;
right:8%;
top:50%;
border-top:3px dashed rgba(8,67,96,0.32);
}
.b2b-map-line .point,
.b2b-map-line .vessel{
position:absolute;
top:50%;
transform:translateY(-50%);
width:34px;
height:34px;
border-radius:50%;
background:#0fa7bd;
box-shadow:0 0 0 10px rgba(15,167,189,0.12);
}
.b2b-map-line .origin{ left:5%; }
.b2b-map-line .destination{
right:5%;
background:#d6ad48;
box-shadow:0 0 0 10px rgba(214,173,72,0.14);
}
.b2b-map-line .vessel{
left:55%;
width:58px;
height:58px;
display:grid;
place-items:center;
color:#ffffff;
background:#09233a;
}
.b2b-map-labels{
display:flex;
justify-content:space-between;
color:#244357;
font-weight:800;
}
.b2b-detail-card{
padding:28px;
border-radius:26px;
background:#09233a;
color:#ffffff;
}
.b2b-detail-card h2{
margin:12px 0;
color:#ffffff;
font-size:36px;
line-height:1.12;
}
.b2b-detail-card p{
color:rgba(237,250,255,0.75);
line-height:1.7;
}
.b2b-detail-list{
display:grid;
gap:12px;
margin-top:22px;
}
.b2b-detail-list div{
display:grid;
grid-template-columns:42px 1fr;
gap:8px 12px;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,0.07);
border:1px solid rgba(255,255,255,0.1);
}
.b2b-detail-list i{
grid-row:span 2;
color:#7fe7f2;
}
.b2b-detail-list span{
color:rgba(237,250,255,0.64);
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
.b2b-detail-list strong{
color:#ffffff;
}
.b2b-product-table{
border-radius:24px;
overflow:hidden;
border:1px solid rgba(8,58,86,0.12);
background:#ffffff;
box-shadow:0 18px 44px rgba(10,45,70,0.1);
}
.b2b-row{
display:grid;
grid-template-columns:1.2fr .8fr 1fr .7fr .8fr .6fr;
gap:14px;
align-items:center;
padding:18px 20px;
border-bottom:1px solid rgba(8,58,86,0.08);
}
.b2b-row:last-child{ border-bottom:0; }
.b2b-row span{
color:#334f62;
font-weight:700;
}
.b2b-row span:first-child{
color:#09233a;
font-weight:900;
}
.b2b-head{
background:#09233a;
}
.b2b-head span{
color:#ffffff !important;
text-transform:uppercase;
letter-spacing:.08em;
font-size:12px;
}
.b2b-row a{
color:#0c8298;
font-weight:900;
}
.b2b-timeline-docs{
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(320px, .82fr);
gap:24px;
}
.b2b-timeline{
padding:26px;
border-radius:24px;
background:#ffffff;
border:1px solid rgba(8,58,86,0.12);
box-shadow:0 18px 44px rgba(10,45,70,0.1);
}
.b2b-timeline article{
position:relative;
display:grid;
grid-template-columns:34px 1fr;
gap:6px 14px;
padding-bottom:22px;
}
.b2b-timeline article:not(:last-child)::after{
content:"";
position:absolute;
left:16px;
top:34px;
bottom:0;
width:2px;
background:#d8e6ed;
}
.b2b-timeline span{
width:32px;
height:32px;
border-radius:50%;
background:#d8e6ed;
border:6px solid #f4f8fb;
z-index:1;
}
.b2b-timeline .done span,
.b2b-timeline .current span{
background:#0fa7bd;
}
.b2b-timeline .current span{
box-shadow:0 0 0 8px rgba(15,167,189,0.14);
}
.b2b-timeline b{
color:#09233a;
}
.b2b-timeline small{
grid-column:2;
color:#6a7f8d;
}
.b2b-doc-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:14px;
}
.b2b-doc-grid article{
padding:20px;
border-radius:22px;
background:#ffffff;
border:1px solid rgba(8,58,86,0.12);
box-shadow:0 14px 34px rgba(10,45,70,0.08);
}
.b2b-doc-grid i{
color:#0fa7bd;
font-size:24px;
}
.b2b-doc-grid b,
.b2b-doc-grid span{
display:block;
}
.b2b-doc-grid b{
margin:14px 0 6px;
color:#09233a;
}
.b2b-doc-grid span{
color:#62798b;
}
.b2b-reserve-grid{
display:grid;
grid-template-columns:minmax(0, .86fr) minmax(360px, 1fr);
gap:34px;
align-items:start;
}
@media (max-width:1100px){
.b2b-dashboard-grid{
grid-template-columns:repeat(3, minmax(0, 1fr));
}
.b2b-container-grid{
grid-template-columns:1fr;
}
}
@media (max-width:860px){
.b2b-imports-hero{
padding:118px 0 56px;
background:linear-gradient(180deg, #061226 0%, #0a314b 58%, #f5f8fb 58.2%, #ffffff 100%);
}
.b2b-imports-hero-grid,
.b2b-detail-grid,
.b2b-timeline-docs,
.b2b-reserve-grid{
grid-template-columns:1fr;
}
.b2b-hero-visual,
.b2b-hero-visual img{
min-height:360px;
}
.b2b-section-head{
display:block;
}
.b2b-tabs{
justify-content:flex-start;
margin-top:18px;
overflow-x:auto;
flex-wrap:nowrap;
padding-bottom:6px;
}
.b2b-tabs button{
white-space:nowrap;
}
.b2b-row,
.b2b-row.b2b-head{
grid-template-columns:1fr;
}
.b2b-head{
display:none;
}
.b2b-row{
gap:6px;
padding:18px;
}
.b2b-row span,
.b2b-row a{
display:block;
}
.b2b-row span:not(:first-child)::before{
content:"";
}
}
@media (max-width:620px){
.b2b-dashboard-grid,
.b2b-meta-grid,
.b2b-doc-grid{
grid-template-columns:1fr;
}
.b2b-imports-hero h1{
font-size:44px;
}
.b2b-map-labels{
font-size:12px;
}
}
/* B2B imports dashboard */
.b2b-dashboard-page{
margin:0;
min-height:100vh;
overflow-x:hidden;
background:#eef3f7;
color:#102438;
font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.b2b-dashboard-page *{ box-sizing:border-box; }
.b2b-app-shell{
display:grid;
grid-template-columns:238px minmax(0, 1fr);
min-height:100vh;
}
.b2b-sidebar{
position:sticky;
top:0;
align-self:start;
height:100vh;
overflow-y:auto;
padding:18px 18px;
background:linear-gradient(180deg, #051a32 0%, #07213e 58%, #06182e 100%);
color:#ffffff;
}
.b2b-dash-brand,
.b2b-account{
display:flex;
align-items:center;
gap:11px;
color:inherit;
text-decoration:none;
}
.b2b-dash-brand img,
.b2b-account img,
.b2b-manager-card img{
flex:0 0 auto;
border-radius:50%;
}
.b2b-dash-brand b,
.b2b-account b{
display:block;
font-family:"Space Grotesk", sans-serif;
font-size:21px;
line-height:1;
}
.b2b-dash-brand small,
.b2b-account small,
.b2b-manager-card small{
display:block;
margin-top:4px;
color:rgba(255,255,255,0.62);
font-size:10px;
font-weight:800;
}
.b2b-side-nav{
display:grid;
gap:4px;
margin:24px 0 18px;
}
.b2b-side-nav a{
display:flex;
align-items:center;
gap:12px;
min-height:36px;
padding:8px 10px;
border-radius:8px;
color:rgba(255,255,255,0.86);
text-decoration:none;
font-size:13px;
font-weight:800;
}
.b2b-side-nav a i{
width:18px;
color:rgba(255,255,255,0.74);
text-align:center;
}
.b2b-side-nav a.active,
.b2b-side-nav a:hover{
background:#d5a64d;
color:#071b33;
}
.b2b-side-nav a.active i,
.b2b-side-nav a:hover i{ color:#071b33; }
.b2b-side-nav .sub{
min-height:30px;
margin-left:25px;
padding:7px 10px;
color:rgba(255,255,255,0.72);
font-size:12px;
}
.b2b-side-nav em{
margin-left:auto;
padding:2px 6px;
border-radius:5px;
background:rgba(255,255,255,0.18);
font-style:normal;
font-size:9px;
font-weight:900;
}
.b2b-vip-card,
.b2b-manager-card,
.b2b-insight-card{
margin-top:14px;
border:1px solid rgba(255,255,255,0.18);
border-radius:14px;
background:rgba(255,255,255,0.055);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
.b2b-vip-card{
padding:18px;
text-align:center;
}
.b2b-vip-card > i{
color:#d6ad48;
font-size:30px;
}
.b2b-vip-card strong,
.b2b-vip-card span,
.b2b-insight-card b{
display:block;
color:#ffffff;
}
.b2b-vip-card strong{
margin-top:9px;
font-size:18px;
text-transform:uppercase;
}
.b2b-vip-card span{
color:#d6ad48;
font-size:12px;
font-weight:900;
text-transform:uppercase;
}
.b2b-vip-card p,
.b2b-insight-card p{
color:rgba(255,255,255,0.72);
line-height:1.55;
font-size:12px;
}
.b2b-vip-card a,
.b2b-insight-card a,
.b2b-vip-benefits a{
display:inline-flex;
justify-content:center;
margin-top:8px;
padding:10px 16px;
border-radius:7px;
background:#d6ad48;
color:#071b33;
font-size:12px;
font-weight:900;
text-decoration:none;
}
.b2b-manager-card{
display:flex;
gap:11px;
padding:14px;
align-items:center;
}
.b2b-manager-card img{
width:46px;
height:46px;
background:#ffffff;
object-fit:cover;
}
.b2b-manager-card b,
.b2b-manager-card a{
display:block;
color:#ffffff;
font-size:12px;
text-decoration:none;
}
.b2b-insight-card{
padding:17px;
}
.b2b-insight-card i{
color:#50d7e7;
font-size:24px;
}
.b2b-dash-main{ min-width:0; }
.b2b-topbar{
position:sticky;
top:0;
z-index:20;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
min-height:64px;
padding:11px 24px;
background:#061b33;
color:#ffffff;
box-shadow:0 8px 24px rgba(5,24,46,0.12);
}
.b2b-search{
position:relative;
flex:1;
max-width:560px;
}
.b2b-search input{
width:100%;
height:42px;
padding:0 46px 0 18px;
border:0;
border-radius:7px;
outline:0;
background:#ffffff;
color:#09233a;
font-weight:700;
}
.b2b-search button{
position:absolute;
right:5px;
top:5px;
width:32px;
height:32px;
border:0;
border-radius:6px;
background:#f2f5f8;
color:#071b33;
}
.b2b-top-actions{
display:flex;
align-items:center;
gap:14px;
}
.b2b-top-actions button{
position:relative;
border:0;
background:transparent;
color:#ffffff;
font-weight:900;
}
.b2b-notification-btn em{
display:none;
}
.b2b-vip-icon,
.b2b-menu-btn{
display:none;
}
.b2b-account b{ font-size:13px; }
.b2b-account img{
width:38px;
height:38px;
object-fit:cover;
background:#ffffff;
}
.b2b-dash-content{
width:100%;
max-width:1480px;
margin:0 auto;
padding:20px 24px 24px;
}
.b2b-title-row{
display:grid;
grid-template-columns:minmax(260px, .8fr) minmax(500px, 1.2fr);
align-items:center;
gap:22px;
margin:0 0 16px;
padding:0;
}
.b2b-title-row h1{
margin:0;
color:#102438;
font-family:"Space Grotesk", sans-serif;
font-size:28px;
line-height:1.1;
text-transform:uppercase;
}
.b2b-title-row h1 em{
display:none;
}
.b2b-title-row p{
margin:5px 0 0;
color:#4e6679;
font-weight:800;
}
.b2b-how-it-works{
display:none;
}
.b2b-feature-pills{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:14px;
}
.b2b-feature-pills span{
display:grid;
grid-template-columns:34px 1fr;
gap:2px 10px;
align-items:center;
min-height:58px;
padding:10px 14px;
border:1px solid #dbe4eb;
border-radius:10px;
background:#ffffff;
}
.b2b-feature-pills i{
grid-row:span 2;
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:50%;
background:#fff6df;
color:#c5942f;
}
.b2b-feature-pills b{
color:#163047;
font-size:13px;
}
.b2b-feature-pills small{
color:#677e8e;
font-size:11px;
font-weight:800;
}
.b2b-compact-request-btn{
display:grid;
grid-template-columns:34px 1fr;
gap:2px 10px;
align-items:center;
min-height:58px;
padding:10px 14px;
border:1px solid rgba(18,154,91,.22);
border-radius:10px;
background:linear-gradient(135deg,#effcf5,#ffffff);
color:#062338;
text-align:left;
cursor:pointer;
box-shadow:0 14px 34px rgba(18,154,91,.12);
}
.b2b-compact-request-btn i{
grid-row:span 2;
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:50%;
background:#129a5b;
color:#fff;
}
.b2b-compact-request-btn b{
color:#061832;
font-size:13px;
font-weight:950;
}
.b2b-compact-request-btn small{
color:#40705b;
font-size:11px;
font-weight:800;
}
.b2b-mobile-request-strip{
display:none;
}
.b2b-live-map{
position:relative;
min-height:282px;
margin:0;
padding:0;
overflow:hidden;
border-radius:15px;
background:#081c31;
box-shadow:0 18px 45px rgba(5,33,55,0.18);
}
.b2b-tracking-map{
position:absolute;
inset:0;
z-index:0;
width:100%;
height:100%;
background:#071b33;
}
.b2b-tracking-map .leaflet-container,
.b2b-tracking-map .leaflet-pane{
font-family:"Inter", system-ui, sans-serif;
}
.b2b-tracking-map .leaflet-control-zoom{
overflow:hidden;
border:1px solid rgba(255,255,255,0.16);
border-radius:8px;
background:rgba(6,27,51,0.68);
box-shadow:0 10px 26px rgba(0,0,0,0.25);
}
.b2b-tracking-map .leaflet-control-zoom a{
border:0;
background:rgba(6,27,51,0.82);
color:#ffffff;
}
.b2b-tracking-map .leaflet-popup-content-wrapper,
.b2b-tracking-map .leaflet-popup-tip{
background:#061b33;
color:#ffffff;
box-shadow:0 14px 34px rgba(0,0,0,0.28);
}
.b2b-tracking-map .leaflet-popup-content{
color:rgba(255,255,255,0.86);
font-size:12px;
line-height:1.45;
}
.b2b-tracking-map .leaflet-popup-content strong{
color:#ffffff;
}
.b2b-map-pin-wrap{
background:transparent;
border:0;
}
.b2b-map-pin{
display:grid;
place-items:center;
width:42px;
height:42px;
border:2px solid rgba(255,255,255,0.84);
border-radius:50%;
background:#0dc7e3;
color:#061b33;
box-shadow:0 0 0 8px rgba(13,199,227,0.18), 0 10px 26px rgba(0,0,0,0.32);
}
.b2b-map-pin span{
position:absolute;
top:44px;
left:50%;
transform:translateX(-50%);
min-width:max-content;
padding:4px 7px;
border-radius:6px;
background:rgba(6,27,51,0.88);
color:#ffffff;
font-size:9px;
font-weight:900;
white-space:nowrap;
}
.b2b-map-pin.ship{
background:#f59b35;
color:#061b33;
box-shadow:0 0 0 10px rgba(245,155,53,0.18), 0 12px 30px rgba(0,0,0,0.34);
}
.b2b-map-pin.transshipment{
background:#238ff0;
color:#ffffff;
}
.b2b-map-pin.destination{
background:#d6ad48;
}
.b2b-map-unavailable{
display:grid;
place-items:center;
height:100%;
padding:28px;
color:#ffffff;
text-align:center;
font-weight:900;
}
.b2b-live-map > img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:.62;
filter:saturate(1.05) contrast(1.04);
}
.b2b-map-overlay{
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(90deg, rgba(4,24,45,0.88), rgba(3,31,56,0.24) 52%, rgba(4,24,45,0.9));
pointer-events:none;
}
.b2b-route-svg{
position:absolute;
z-index:2;
inset:42px 130px 22px 28px;
width:calc(100% - 300px);
height:210px;
opacity:.92;
}
.b2b-route-dot{
position:absolute;
z-index:2;
min-width:142px;
padding:12px 14px;
border-radius:8px;
color:#ffffff;
background:rgba(7,27,51,0.88);
border:1px solid rgba(255,255,255,0.18);
box-shadow:0 12px 28px rgba(0,0,0,0.22);
pointer-events:none;
}
.b2b-route-dot::before{
content:"";
position:absolute;
left:14px;
bottom:-17px;
width:14px;
height:14px;
border-radius:50%;
background:#20d7f4;
box-shadow:0 0 0 8px rgba(32,215,244,0.14);
}
.b2b-route-dot b,
.b2b-route-dot span{
display:block;
}
.b2b-route-dot b{
text-transform:uppercase;
font-size:11px;
}
.b2b-route-dot span{
margin-top:3px;
color:rgba(255,255,255,0.78);
font-size:11px;
font-weight:800;
}
.b2b-route-dot.origin{ left:28px; top:30px; }
.b2b-route-dot.current{ left:47%; top:88px; transform:translateX(-50%); }
.b2b-route-dot.current::before{ background:#f4922f; box-shadow:0 0 0 8px rgba(244,146,47,0.16); }
.b2b-route-dot.destination{ right:205px; top:38px; }
.b2b-route-dot.destination::before{ background:#d6ad48; box-shadow:0 0 0 8px rgba(214,173,72,0.18); }
.b2b-ship-marker{
position:absolute;
z-index:3;
left:39%;
top:148px;
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border-radius:8px;
background:#061b33;
color:#ffffff;
box-shadow:0 12px 30px rgba(0,0,0,0.28);
pointer-events:none;
}
.b2b-ship-marker i{
color:#f4922f;
font-size:22px;
}
.b2b-ship-marker span{
font-size:11px;
font-weight:900;
}
.b2b-ship-marker small{
color:rgba(255,255,255,0.6);
}
.b2b-mobile-live-label,
.b2b-mobile-status,
.b2b-mobile-timeline,
.b2b-mobile-map-metrics{
display:none;
pointer-events:none;
}
.b2b-map-summary{
position:absolute;
z-index:4;
right:0;
top:0;
bottom:0;
width:186px;
padding:24px 20px;
background:rgba(7,27,51,0.86);
color:#ffffff;
}
.b2b-map-summary h3{
margin:0 0 8px;
color:#ffffff;
font-size:13px;
}
.b2b-map-summary strong{
display:block;
margin-bottom:22px;
font-size:20px;
}
.b2b-map-summary ul{
display:grid;
gap:13px;
margin:0;
padding:0;
list-style:none;
}
.b2b-map-summary li{
display:flex;
align-items:center;
gap:8px;
color:rgba(255,255,255,0.82);
font-size:12px;
font-weight:800;
}
.b2b-map-summary li b{ margin-left:auto; color:#ffffff; }
.b2b-map-summary li i{
width:10px;
height:10px;
border-radius:50%;
}
.b2b-map-summary .prep{ background:#d6ad48; }
.b2b-map-summary .way{ background:#23a6ee; }
.b2b-map-summary .arr{ background:#32bd71; }
.b2b-map-summary .sold{ background:#e35382; }
.b2b-board{ margin-top:20px; }
.b2b-board{ margin-top:18px; }
.b2b-board,
.b2b-bottom-grid,
.b2b-reserve-panel{ padding:0; }
.b2b-board-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:14px;
}
.b2b-board-toolbar .b2b-tabs{
display:flex;
flex-wrap:wrap;
gap:10px;
min-width:0;
max-width:100%;
}
.b2b-board-toolbar .b2b-tabs button{
height:42px;
border:1px solid #dbe4eb;
border-radius:8px;
background:#ffffff;
color:#223a50;
padding:0 18px;
font-weight:900;
}
.b2b-board-toolbar .b2b-tabs button.active{
border-color:#061b33;
background:#061b33;
color:#ffffff;
}
.b2b-board-toolbar label{
display:flex;
align-items:center;
gap:8px;
color:#51677a;
font-size:12px;
font-weight:900;
}
.b2b-board-toolbar select{
height:40px;
border:1px solid #dbe4eb;
border-radius:7px;
background:#ffffff;
color:#102438;
font-weight:800;
}
.shipment-row{
display:grid;
grid-template-columns:minmax(240px, 304px) minmax(0, 1fr) minmax(280px, .92fr) 154px;
grid-template-areas:
"photo info products stock"
"photo tracking tracking stock";
gap:0;
overflow:hidden;
min-height:262px;
margin-bottom:18px;
border:1px solid #dfe8ef;
border-radius:13px;
background:#ffffff;
box-shadow:0 14px 36px rgba(13,43,67,0.08);
}
.b2b-loading-state,
.b2b-empty-state{
margin:0;
padding:24px;
border:1px solid #dfe8ef;
border-radius:12px;
background:#ffffff;
color:#31536a;
font-weight:900;
text-align:center;
box-shadow:0 12px 34px rgba(13,43,67,0.08);
}
.shipment-row.is-hidden{ display:none; }
.shipment-photo{
grid-area:photo;
position:relative;
min-height:262px;
overflow:hidden;
background:#061b33;
color:#ffffff;
}
.shipment-photo::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(5,24,46,0.04), rgba(5,24,46,0.18) 38%, rgba(5,24,46,0.82));
}
.shipment-photo img{
width:100%;
height:100%;
object-fit:cover;
}
.shipment-photo > span,
.shipment-photo > b,
.shipment-photo > small,
.shipment-photo > i{
position:absolute;
z-index:1;
color:#ffffff;
}
.shipment-photo > span{
top:15px;
left:15px;
max-width:calc(100% - 70px);
padding:8px 13px;
border-radius:8px;
font-size:11px;
font-weight:900;
text-transform:uppercase;
overflow:hidden;
box-shadow:0 10px 24px rgba(0,0,0,0.16);
animation:b2bStatusGlow 2.4s ease-in-out infinite;
}
.shipment-photo > i{
top:16px;
right:16px;
display:grid;
place-items:center;
width:30px;
height:30px;
border-radius:50%;
background:linear-gradient(135deg,#0c73d8,#1aa35d);
box-shadow:0 10px 24px rgba(3,24,45,.24);
}
.shipment-photo > span::after,
.b2b-story-status::after{
content:"";
position:absolute;
top:-30%;
bottom:-30%;
left:-45%;
width:36%;
transform:rotate(16deg);
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.58), transparent);
animation:b2bStatusSweep 3.2s ease-in-out infinite;
}
.shipment-photo.prep > span,
.shipment-photo.prep .b2b-story-status{
background:linear-gradient(135deg,#19a864,#087843);
color:#ffffff;
box-shadow:0 10px 22px rgba(9,126,71,0.28);
}
.shipment-photo.way > span,
.shipment-photo.way .b2b-story-status{ background:#198bcb; }
.shipment-photo.arr > span,
.shipment-photo.arr .b2b-story-status{ background:#2eae68; }
.shipment-photo.sold > span,
.shipment-photo.sold .b2b-story-status{ background:#607180; }
.shipment-photo.stage-supply_confirmed > span,
.shipment-photo.stage-supply_confirmed .b2b-story-status{
background:linear-gradient(135deg,#d8a742,#b87913);
color:#ffffff;
box-shadow:0 10px 22px rgba(184,121,19,0.28);
}
.shipment-photo.stage-booking_confirmed > span,
.shipment-photo.stage-booking_confirmed .b2b-story-status{
background:linear-gradient(135deg,#19a864,#087843);
color:#ffffff;
box-shadow:0 10px 22px rgba(9,126,71,0.28);
}
.shipment-photo.stage-container_ready > span,
.shipment-photo.stage-container_ready .b2b-story-status{
background:linear-gradient(135deg,#39a9ec,#1276bd);
color:#ffffff;
box-shadow:0 10px 22px rgba(18,118,189,0.24);
}
.shipment-photo.stage-container_loading > span,
.shipment-photo.stage-container_loading .b2b-story-status{
background:linear-gradient(135deg,#0ea5b7,#08788a);
color:#ffffff;
box-shadow:0 10px 22px rgba(8,120,138,0.24);
}
.shipment-photo.stage-vessel_departure > span,
.shipment-photo.stage-on_the_way > span,
.shipment-photo.stage-vessel_departure .b2b-story-status,
.shipment-photo.stage-on_the_way .b2b-story-status{
background:linear-gradient(135deg,#123e73,#061b33);
color:#ffffff;
box-shadow:0 10px 22px rgba(6,27,51,0.26);
}
.shipment-photo.stage-arriving_destination > span,
.shipment-photo.stage-arriving_destination .b2b-story-status{
background:linear-gradient(135deg,#7c5cff,#334ac0);
color:#ffffff;
box-shadow:0 10px 22px rgba(51,74,192,0.24);
}
.shipment-photo.stage-customs_clearance > span,
.shipment-photo.stage-customs_clearance .b2b-story-status{
background:linear-gradient(135deg,#f59e0b,#c55a11);
color:#ffffff;
box-shadow:0 10px 22px rgba(197,90,17,0.24);
}
.shipment-photo.stage-ready_delivery > span,
.shipment-photo.stage-ready_delivery .b2b-story-status{
background:linear-gradient(135deg,#14b8a6,#047f73);
color:#ffffff;
box-shadow:0 10px 22px rgba(4,127,115,0.24);
}
.shipment-photo.stage-delivered > span,
.shipment-photo.stage-delivered .b2b-story-status{
background:linear-gradient(135deg,#64748b,#334155);
color:#ffffff;
box-shadow:0 10px 22px rgba(51,65,85,0.22);
}
.shipment-photo > b{
left:18px;
right:18px;
bottom:64px;
font-size:23px;
line-height:1.05;
}
.shipment-photo > small{
left:18px;
right:18px;
bottom:22px;
font-weight:900;
line-height:1.55;
}
.b2b-story-carousel{
position:absolute;
inset:0;
overflow:hidden;
color:#ffffff;
background:#061b33;
}
.b2b-lux-hero figure .b2b-story-carousel{
border-radius:10px;
}
.b2b-story-slides,
.b2b-story-slide{
position:absolute;
inset:0;
margin:0;
}
.b2b-story-slide{
opacity:0;
transition:opacity .72s ease;
pointer-events:none;
}
.b2b-story-slide.is-active{
opacity:1;
pointer-events:auto;
}
.b2b-story-slide img{
width:100%;
height:100%;
object-fit:cover;
}
.b2b-story-slide figcaption{
position:absolute;
left:16px;
right:auto;
top:100px;
bottom:auto;
z-index:2;
display:grid;
gap:3px;
width:min(68%, 250px);
padding:10px 12px;
border:1px solid rgba(255,255,255,.18);
border-radius:10px;
background:rgba(2,13,27,.58);
backdrop-filter:blur(8px);
}
.b2b-story-slide figcaption strong{
color:#ffffff;
font-size:12px;
font-weight:1000;
text-transform:uppercase;
}
.b2b-story-slide figcaption small{
position:static;
color:rgba(255,255,255,.84);
font-size:10px;
font-weight:800;
line-height:1.35;
}
.b2b-story-shade{
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(180deg, rgba(5,24,46,.08), rgba(5,24,46,.18) 42%, rgba(5,24,46,.84));
pointer-events:none;
}
.b2b-story-status,
.b2b-story-shield,
.b2b-story-reference,
.b2b-story-route,
.b2b-story-controls,
.b2b-story-dots,
.b2b-story-progress-label{
position:absolute;
z-index:3;
}
.b2b-story-status{
top:15px;
left:15px;
max-width:calc(100% - 78px);
padding:8px 13px;
border-radius:8px;
background:linear-gradient(135deg,#19a864,#087843);
color:#ffffff;
font-size:11px;
font-weight:1000;
text-transform:uppercase;
overflow:hidden;
box-shadow:0 10px 24px rgba(0,0,0,.16);
animation:b2bStatusGlow 2.4s ease-in-out infinite;
}
.b2b-story-shield{
top:16px;
right:16px;
display:grid;
place-items:center;
width:30px;
height:30px;
border-radius:50%;
background:linear-gradient(135deg,#0c73d8,#1aa35d);
box-shadow:0 10px 24px rgba(3,24,45,.24);
}
.b2b-story-reference{
left:18px;
right:18px;
bottom:62px;
color:#ffffff;
font-size:22px;
line-height:1.05;
text-shadow:0 3px 12px rgba(0,0,0,.38);
}
.b2b-story-route{
left:18px;
right:86px;
bottom:21px;
color:#ffffff;
font-weight:900;
line-height:1.38;
text-shadow:0 3px 12px rgba(0,0,0,.38);
}
.b2b-story-controls{
right:14px;
bottom:48px;
display:flex;
gap:7px;
}
.b2b-story-controls button,
.b2b-story-dots button{
border:0;
cursor:pointer;
}
.b2b-story-controls button{
display:grid;
place-items:center;
width:28px;
height:28px;
border-radius:50%;
background:rgba(255,255,255,.86);
color:#06203d;
box-shadow:0 8px 20px rgba(0,0,0,.16);
}
.b2b-story-dots{
right:16px;
bottom:22px;
display:flex;
gap:5px;
}
.b2b-story-dots button{
width:7px;
height:7px;
padding:0;
border-radius:999px;
background:rgba(255,255,255,.56);
}
.b2b-story-dots button.is-active{
width:18px;
background:#ffffff;
}
.b2b-story-progress-label{
right:14px;
top:58px;
display:inline-flex;
align-items:center;
gap:6px;
max-width:168px;
padding:7px 10px;
border-radius:999px;
background:rgba(4,23,45,.58);
color:#ffffff;
font-size:10px;
font-weight:1000;
text-transform:uppercase;
letter-spacing:.03em;
backdrop-filter:blur(8px);
box-shadow:0 8px 20px rgba(0,0,0,.14);
}
.b2b-story-detail .b2b-story-reference{
font-size:20px;
}
.b2b-story-detail .b2b-story-slide figcaption{
width:min(74%, 310px);
}
/* Approved Live Shipment Story overlay: visual-only, no repeated technical IDs. */
.b2b-story-carousel{
isolation:isolate;
}
.b2b-story-slide{
transition:opacity 1.05s ease, transform 5.8s ease;
}
.b2b-story-slide.is-active{
transform:scale(1.015);
}
.b2b-story-slide::after{
content:"";
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(90deg, rgba(1,10,22,.88) 0%, rgba(2,17,35,.64) 42%, rgba(2,17,35,.28) 68%, rgba(2,17,35,.18) 100%),
linear-gradient(180deg, rgba(2,15,31,.08), rgba(2,15,31,.3) 52%, rgba(2,15,31,.88));
pointer-events:none;
}
.b2b-story-slide img{
position:relative;
z-index:0;
}
.b2b-story-shade{
display:none;
}
.b2b-story-status{
top:18px;
left:18px;
display:inline-flex;
align-items:center;
gap:8px;
max-width:calc(100% - 36px);
padding:10px 16px;
border-radius:12px;
background:linear-gradient(135deg,#18b86a,#07804a);
font-size:12px;
letter-spacing:.01em;
box-shadow:0 16px 32px rgba(2,16,32,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.b2b-story-status::before{
content:"\f00c";
display:grid;
place-items:center;
width:20px;
height:20px;
border-radius:50%;
background:rgba(255,255,255,.92);
color:#0b8f51;
font-family:"Font Awesome 6 Free";
font-size:11px;
font-weight:900;
}
.b2b-story-carousel.stage-on_the_way .b2b-story-status,
.b2b-story-carousel.stage-vessel_departure .b2b-story-status{
background:linear-gradient(135deg,#2873df,#0e54b2);
}
.b2b-story-carousel.stage-on_the_way .b2b-story-status::before,
.b2b-story-carousel.stage-vessel_departure .b2b-story-status::before{
color:#125fca;
}
.b2b-story-carousel.stage-arriving_destination .b2b-story-status,
.b2b-story-carousel.stage-customs_clearance .b2b-story-status{
background:linear-gradient(135deg,#e3ae35,#b57912);
}
.b2b-story-carousel.stage-arriving_destination .b2b-story-status::before,
.b2b-story-carousel.stage-customs_clearance .b2b-story-status::before{
color:#b57912;
}
.b2b-story-carousel.stage-delivered .b2b-story-status{
background:linear-gradient(135deg,#0e9c69,#087c59);
}
.b2b-story-progress-label{
top:72px;
left:20px;
right:auto;
max-width:260px;
padding:0;
border-radius:0;
background:transparent;
color:#ffffff;
font-size:11px;
letter-spacing:.04em;
text-shadow:0 2px 10px rgba(0,0,0,.42);
box-shadow:none;
backdrop-filter:none;
}
.b2b-story-progress-label i{
color:#ffffff;
}
.b2b-story-slide figcaption,
.b2b-story-detail .b2b-story-slide figcaption{
left:20px;
top:124px;
width:min(48%, 315px);
grid-template-columns:52px minmax(0,1fr);
align-items:center;
gap:14px;
padding:18px;
border:1px solid rgba(255,255,255,.24);
border-radius:15px;
background:rgba(3,19,39,.68);
box-shadow:0 18px 44px rgba(1,10,22,.36);
backdrop-filter:blur(14px);
}
.b2b-story-card .b2b-story-slide figcaption{
top:92px;
left:16px;
width:min(252px, calc(100% - 32px));
grid-template-columns:42px minmax(0,1fr);
gap:11px;
padding:12px;
border-radius:13px;
}
.b2b-story-card .b2b-story-slide figcaption > i{
width:42px;
height:42px;
font-size:17px;
}
.b2b-story-card .b2b-story-slide figcaption strong{
font-size:13px;
}
.b2b-story-card .b2b-story-slide figcaption small{
font-size:10px;
line-height:1.25;
}
.b2b-story-card .b2b-story-slide figcaption em{
margin-top:5px;
font-size:8.5px;
}
.b2b-story-slide figcaption > i{
display:grid;
place-items:center;
width:52px;
height:52px;
border-radius:50%;
background:linear-gradient(135deg,#1265d8,#0a3c83);
color:#ffffff;
font-size:21px;
}
.b2b-story-carousel.stage-container_loading .b2b-story-slide figcaption > i,
.b2b-story-carousel.stage-container_ready .b2b-story-slide figcaption > i,
.b2b-story-carousel.stage-booking_confirmed .b2b-story-slide figcaption > i,
.b2b-story-carousel.stage-supply_confirmed .b2b-story-slide figcaption > i{
background:linear-gradient(135deg,#12b96d,#09834c);
}
.b2b-story-slide figcaption span{
min-width:0;
}
.b2b-story-slide figcaption strong{
display:block;
margin-bottom:5px;
color:#ffffff;
font-size:16px;
line-height:1.1;
text-transform:none;
}
.b2b-story-slide figcaption small{
color:rgba(255,255,255,.92);
font-size:12px;
font-weight:700;
line-height:1.35;
}
.b2b-story-slide figcaption em{
display:block;
margin-top:8px;
color:rgba(255,255,255,.62);
font-size:10px;
font-style:normal;
font-weight:800;
letter-spacing:.02em;
}
.b2b-story-bottom-info{
position:absolute;
left:20px;
bottom:22px;
z-index:2;
display:grid;
grid-template-columns:40px minmax(0,1fr);
align-items:center;
gap:12px;
min-width:260px;
max-width:min(46%, 310px);
padding:16px 18px;
border:1px solid rgba(255,255,255,.18);
border-radius:16px;
background:rgba(3,19,39,.48);
box-shadow:0 16px 38px rgba(1,10,22,.28);
backdrop-filter:blur(10px);
}
.b2b-story-card .b2b-story-bottom-info{
left:16px;
bottom:15px;
grid-template-columns:32px minmax(0,1fr);
width:min(166px, calc(100% - 130px));
min-width:0;
max-width:none;
gap:9px;
padding:10px 11px;
border-radius:13px;
}
.b2b-story-card .b2b-story-bottom-info > i{
width:32px;
height:32px;
font-size:14px;
}
.b2b-story-card .b2b-story-bottom-info small{
font-size:8.5px;
}
.b2b-story-card .b2b-story-bottom-info strong{
font-size:12px;
}
.b2b-story-card .b2b-story-bottom-info em{
display:none;
}
.b2b-story-bottom-info > i{
display:grid;
place-items:center;
width:40px;
height:40px;
border-radius:50%;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.06);
color:#ffffff;
font-size:17px;
}
.b2b-story-bottom-info small,
.b2b-story-bottom-info strong,
.b2b-story-bottom-info em{
display:block;
min-width:0;
}
.b2b-story-bottom-info small{
color:rgba(255,255,255,.66);
font-size:11px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}
.b2b-story-bottom-info strong{
margin-top:5px;
color:#ffffff;
font-size:16px;
line-height:1.12;
}
.b2b-story-bottom-info em{
margin-top:5px;
color:#f0c45c;
font-size:12px;
font-style:normal;
font-weight:900;
}
.b2b-story-controls{
right:18px;
bottom:55px;
gap:12px;
}
.b2b-story-card .b2b-story-controls{
right:16px;
bottom:56px;
gap:8px;
}
.b2b-story-card .b2b-story-controls button{
width:38px;
height:38px;
font-size:15px;
}
.b2b-story-controls button{
width:44px;
height:44px;
background:rgba(255,255,255,.95);
color:#061b33;
font-size:18px;
box-shadow:0 14px 30px rgba(1,10,22,.28);
}
.b2b-story-pagination{
position:absolute;
right:20px;
bottom:18px;
z-index:3;
display:flex;
align-items:center;
gap:14px;
}
.b2b-story-card .b2b-story-pagination{
right:17px;
bottom:17px;
gap:10px;
}
.b2b-story-card .b2b-story-pagination > span{
font-size:11px;
}
.b2b-story-detail .b2b-story-slide figcaption{
top:84px;
width:min(250px, calc(100% - 132px));
grid-template-columns:38px minmax(0,1fr);
gap:10px;
padding:10px;
border-radius:13px;
}
.b2b-story-detail .b2b-story-slide figcaption > i{
width:38px;
height:38px;
font-size:15px;
}
.b2b-story-detail .b2b-story-slide figcaption strong{
font-size:13px;
}
.b2b-story-detail .b2b-story-slide figcaption small{
font-size:9.5px;
line-height:1.22;
}
.b2b-story-detail .b2b-story-slide figcaption em{
margin-top:4px;
font-size:8px;
}
.b2b-story-detail .b2b-story-bottom-info{
width:min(260px, calc(100% - 136px));
min-width:0;
max-width:none;
padding:12px 14px;
}
.b2b-story-pagination > span{
color:#ffffff;
font-size:13px;
font-weight:900;
text-shadow:0 2px 10px rgba(0,0,0,.42);
}
.b2b-story-dots{
position:static;
display:flex;
gap:8px;
}
.b2b-story-dots button{
width:9px;
height:9px;
background:rgba(255,255,255,.58);
}
.b2b-story-dots button.is-active{
width:9px;
background:#e8b94d;
}
.b2b-story-modal{
position:fixed;
inset:0;
z-index:10020;
display:none;
}
.b2b-story-modal.is-open{
display:block;
}
.b2b-story-modal-backdrop{
position:absolute;
inset:0;
background:rgba(3,14,29,.62);
backdrop-filter:blur(7px);
}
.b2b-story-modal-card{
position:relative;
width:min(920px, calc(100vw - 30px));
max-height:calc(100vh - 44px);
margin:22px auto;
overflow:auto;
border:1px solid rgba(216,227,235,.92);
border-radius:16px;
background:#ffffff;
color:#061b33;
box-shadow:0 24px 70px rgba(3,14,29,.26);
}
.b2b-story-modal-card header{
position:sticky;
top:0;
z-index:2;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
padding:20px 22px;
border-bottom:1px solid #e1ebf2;
background:rgba(255,255,255,.96);
backdrop-filter:blur(8px);
}
.b2b-story-modal-card header small{
display:block;
margin-bottom:5px;
color:#0a8fa7;
font-size:11px;
font-weight:1000;
text-transform:uppercase;
letter-spacing:.08em;
}
.b2b-story-modal-card header h3{
margin:0;
color:#04172d;
font-size:24px;
}
.b2b-story-modal-card header p{
margin:6px 0 0;
color:#587084;
font-weight:800;
}
.b2b-story-modal-card header button{
display:grid;
place-items:center;
width:38px;
height:38px;
border:0;
border-radius:50%;
background:#eef5f8;
color:#08223d;
cursor:pointer;
}
.b2b-story-timeline{
display:grid;
gap:14px;
padding:18px 22px 22px;
}
.b2b-story-timeline article{
display:grid;
grid-template-columns:180px minmax(0,1fr);
gap:16px;
align-items:center;
padding:12px;
border:1px solid #e2ecf2;
border-radius:14px;
background:linear-gradient(135deg,#ffffff,#f7fbfd);
}
.b2b-story-timeline img{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
border-radius:10px;
background:#eaf1f6;
}
.b2b-story-timeline b{
display:block;
color:#061b33;
font-size:16px;
}
.b2b-story-timeline small{
display:block;
margin-top:4px;
color:#0b7f93;
font-weight:900;
}
.b2b-story-timeline p{
margin:8px 0 0;
color:#516b7f;
font-weight:750;
}
@media (prefers-reduced-motion: reduce){
.b2b-story-slide{
transition:none;
}
}
@media (max-width: 780px){
.b2b-story-status{
top:10px;
left:10px;
right:auto;
max-width:calc(100% - 74px);
padding:7px 10px;
border-radius:999px;
font-size:9px;
line-height:1.15;
}
.b2b-story-shield{
top:10px;
right:10px;
width:28px;
height:28px;
}
.b2b-story-reference{
bottom:50px;
font-size:18px;
}
.b2b-story-route{
right:92px;
bottom:20px;
font-size:11px;
line-height:1.25;
}
.b2b-story-slide figcaption{
left:12px;
right:auto;
top:84px;
bottom:auto;
width:min(245px, calc(100% - 24px));
padding:8px 10px;
}
.b2b-story-controls{
right:12px;
bottom:48px;
}
.b2b-story-dots{
right:14px;
bottom:20px;
}
.b2b-story-progress-label{
top:46px;
right:10px;
max-width:138px;
padding:6px 8px;
font-size:9px;
}
.b2b-story-modal-card{
width:calc(100vw - 18px);
margin:9px auto;
max-height:calc(100vh - 18px);
border-radius:14px;
}
.b2b-story-modal-card header{
padding:16px;
}
.b2b-story-timeline{
padding:14px;
}
.b2b-story-timeline article{
grid-template-columns:1fr;
}
}
.shipment-info,
.shipment-products,
.shipment-stock{
padding:18px 20px;
border-right:1px solid #edf1f4;
}
.shipment-info{ grid-area:info; }
.shipment-products{ grid-area:products; }
.shipment-stock{ grid-area:stock; }
.shipment-route-title{
display:flex;
align-items:center;
flex-wrap:nowrap;
gap:10px;
margin:0 0 26px;
color:#102438;
font-size:18px;
line-height:1.35;
}
.shipment-route-title span{
display:flex;
align-items:center;
gap:8px;
min-width:0;
font-weight:900;
}
.shipment-route-title img{
width:22px;
height:15px;
border-radius:2px;
object-fit:cover;
box-shadow:0 0 0 1px rgba(7,27,51,.08);
}
.shipment-route-title i{
flex:0 0 auto;
color:#95a6b3;
font-size:14px;
}
.shipment-facts{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:0;
border:0;
}
.shipment-facts span:nth-child(n+5){
display:none;
}
.shipment-facts span,
.shipment-stock span{
display:block;
}
.shipment-facts span{
min-height:58px;
padding:0 18px;
border-right:1px solid #e2eaf1;
}
.shipment-facts span:first-child{ padding-left:0; }
.shipment-facts span:last-child{ border-right:0; }
.shipment-facts small,
.shipment-stock span{
color:#607789;
font-size:11px;
font-weight:900;
text-transform:uppercase;
}
.shipment-facts b,
.shipment-stock b{
display:block;
margin-top:5px;
color:#102438;
font-size:13px;
}
.mini-progress{
height:10px;
overflow:hidden;
margin-top:20px;
border-radius:999px;
background:#e5edf3;
}
.mini-progress i{
display:block;
height:100%;
border-radius:999px;
background:#209cda;
}
.b2b-tracking-alert{
display:none;
grid-template-columns:38px 1fr;
gap:10px;
align-items:center;
margin-top:14px;
padding:13px;
border:1px solid #cdebf1;
border-radius:10px;
background:#f2fbfd;
}
.b2b-tracking-alert i{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:50%;
background:#dff8fc;
color:#0a91a8;
}
.b2b-tracking-alert b,
.b2b-tracking-alert small{
display:block;
}
.b2b-tracking-alert b{
color:#0a3848;
font-size:13px;
}
.b2b-tracking-alert small{
margin-top:4px;
color:#557182;
line-height:1.45;
font-weight:800;
}
.shipment-products h3{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin:0 0 12px;
color:#607789;
font-size:11px;
font-weight:900;
text-transform:uppercase;
}
.shipment-products h3 button{
border:0;
background:transparent;
color:#0759df;
font-size:11px;
font-weight:1000;
cursor:pointer;
}
.shipment-product-card{
position:relative;
display:grid;
grid-template-columns:78px minmax(0,1fr) auto;
align-items:center;
gap:12px;
min-height:86px;
padding:9px 10px;
border-bottom:1px solid #edf1f4;
border-radius:8px;
background:#ffffff;
}
.shipment-product-card + .shipment-product-card{
margin-top:8px;
}
.shipment-product-card:last-of-type{ border-bottom:0; }
.shipment-product-card img{
width:78px;
height:58px;
object-fit:contain;
border-radius:6px;
background:#f1f5f7;
}
.shipment-product-card b,
.shipment-product-card small{
display:block;
}
.shipment-product-card b{
color:#102438;
font-size:14px;
}
.shipment-product-card small{
margin-top:3px;
color:#708696;
font-size:11px;
font-weight:800;
}
.shipment-product-card strong,
.shipment-product-card em{
display:block;
color:#102438;
font-size:13px;
font-style:normal;
font-weight:1000;
text-align:right;
}
.shipment-product-card strong small,
.shipment-product-card em small{
color:#708696;
font-size:10px;
text-transform:uppercase;
}
.shipment-product-card em{
color:#159d5b;
}
.shipment-product-card > i{
position:absolute;
left:49px;
top:52px;
padding:3px 6px;
border-radius:5px;
background:#eaf3ff;
color:#0759df;
font-size:10px;
font-style:normal;
font-weight:1000;
}
.shipment-product-empty{
margin:0;
padding:16px;
border:1px dashed #d5e2eb;
border-radius:9px;
color:#607789;
font-weight:800;
}
.shipment-products strong{
color:#102438;
font-size:13px;
}
.shipment-products-more{
width:100%;
min-height:34px;
margin-top:8px;
border:1px dashed rgba(8,140,163,.36);
border-radius:9px;
background:#f5fbfd;
color:#087a94;
font-size:12px;
font-weight:1000;
cursor:pointer;
}
.shipment-products-more:hover{
background:#eaf8fb;
}
.shipment-stock{
display:grid;
align-content:center;
gap:10px;
border-right:0;
background:#ffffff;
text-align:center;
}
.shipment-stock .available b{ color:#159d5b; }
.shipment-stock a{
display:flex;
align-items:center;
justify-content:center;
min-height:36px;
border-radius:7px;
background:#061b33;
color:#ffffff;
text-decoration:none;
font-size:12px;
font-weight:900;
}
.shipment-stock a:nth-of-type(2){
background:linear-gradient(135deg,#eac65b,#d6a136);
color:#061b33;
}
.shipment-stock time{
display:block;
align-self:end;
margin-top:2px;
padding:7px 8px;
border-radius:999px;
background:#e8f7ed;
color:#16884a;
font-size:11px;
font-weight:900;
}
.shipment-stock a:first-of-type{
margin-top:2px;
}
.shipment-stock a + a{
background:#d6ad48;
color:#061b33;
}
.shipment-mini-tracking{
grid-area:tracking;
min-width:0;
padding:10px 22px 13px;
border-top:1px solid #edf1f4;
border-right:1px solid #edf1f4;
background:#ffffff;
}
.mini-track-rail{
--track-progress:0%;
position:relative;
display:grid;
grid-template-columns:repeat(10, minmax(48px, 1fr));
gap:4px;
padding-top:8px;
}
.mini-track-rail::before,
.mini-track-rail::after{
content:"";
position:absolute;
left:32px;
right:32px;
top:26px;
height:2px;
background:repeating-linear-gradient(90deg, #b9c6cf 0 7px, transparent 7px 12px);
}
.mini-track-rail::after{
right:auto;
width:calc((100% - 64px) * var(--track-progress) / 100);
background:#21a766;
}
.mini-track-rail span{
position:relative;
z-index:1;
display:grid;
justify-items:center;
gap:4px;
color:#7d8e9c;
text-align:center;
}
.mini-track-rail i{
display:grid;
place-items:center;
width:32px;
height:32px;
border:2px solid #d3dde5;
border-radius:50%;
background:#ffffff;
color:#7e909c;
font-size:13px;
}
.mini-track-rail b{
max-width:68px;
color:#1a3145;
font-size:8px;
line-height:1.12;
font-weight:1000;
}
.mini-track-rail small{
color:#536c7e;
font-size:7px;
line-height:1.2;
font-weight:900;
}
.mini-track-rail .is-done i{
border-color:#22a967;
color:#22a967;
}
.mini-track-rail .is-done i::after{
content:"\f00c";
position:absolute;
display:grid;
place-items:center;
width:14px;
height:14px;
margin:27px 0 0 25px;
border-radius:50%;
background:#22a967;
color:#ffffff;
font-family:"Font Awesome 6 Free";
font-size:8px;
font-weight:900;
}
.mini-track-rail .is-current i{
border-color:#188bd5;
background:#e9f7ff;
color:#188bd5;
box-shadow:0 0 0 4px rgba(24,139,213,.12);
animation:b2bLiveDot 1.8s ease-out infinite;
}
.mini-track-rail .is-current b,
.mini-track-rail .is-current small{
color:#0883ca;
}
.mini-track-rail .is-current b{
animation:b2bTextPulse 2.4s ease-in-out infinite;
}
.mini-vessel-progress{
display:grid;
grid-template-columns:auto minmax(120px, 1fr) auto;
align-items:center;
gap:10px;
margin:8px 0 0;
color:#466173;
font-size:10px;
font-weight:1000;
text-transform:uppercase;
}
.mini-vessel-progress span{
height:8px;
overflow:hidden;
border-radius:999px;
background:#e5edf3;
}
.mini-vessel-progress i{
display:block;
height:100%;
border-radius:999px;
background:#209cda;
}
.mini-current-status{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-top:10px;
padding:8px 12px;
border:1px solid #dceaf2;
border-radius:7px;
background:#f7fbfe;
}
.mini-current-status span{
display:grid;
grid-template-columns:10px auto 1fr;
align-items:center;
gap:8px;
min-width:0;
}
.mini-current-status i{
width:7px;
height:7px;
border-radius:50%;
background:#188bd5;
box-shadow:0 0 0 0 rgba(24,139,213,0.5);
animation:b2bLiveDot 1.7s ease-out infinite;
}
.mini-current-status b{
color:#0883ca;
font-size:9px;
font-weight:1000;
text-transform:uppercase;
animation:b2bTextPulse 2.4s ease-in-out infinite;
}
.mini-current-status small{
min-width:0;
color:#24435a;
font-size:11px;
font-weight:800;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.mini-current-status time{
flex:0 0 auto;
color:#102438;
font-size:10px;
font-weight:900;
}
.b2b-container-tracking{
margin:22px 0 0;
}
.b2b-section-head{
display:grid;
gap:6px;
margin-bottom:14px;
}
.b2b-section-head span{
display:inline-flex;
align-items:center;
gap:8px;
width:max-content;
padding:7px 10px;
border-radius:999px;
background:#eaf8fb;
color:#0b7b92;
font-size:11px;
font-weight:900;
text-transform:uppercase;
}
.b2b-section-head h2{
margin:0;
color:#102438;
font-size:24px;
}
.b2b-section-head p{
max-width:760px;
margin:0;
color:#5d7384;
font-weight:800;
line-height:1.55;
}
.b2b-container-track-grid{
display:grid;
gap:16px;
}
.b2b-container-card{
display:grid;
grid-template-columns:210px minmax(0, 1fr);
overflow:hidden;
border:1px solid #dfe8ef;
border-radius:16px;
background:#ffffff;
box-shadow:0 16px 38px rgba(13,43,67,0.09);
}
.b2b-container-visual{
position:relative;
min-height:286px;
overflow:hidden;
background:#08233b;
color:#ffffff;
}
.b2b-container-visual::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(5,24,46,0.02), rgba(5,24,46,0.76));
}
.b2b-container-visual img{
width:100%;
height:100%;
object-fit:cover;
}
.b2b-container-visual span,
.b2b-container-visual b,
.b2b-container-visual small{
position:absolute;
z-index:1;
left:16px;
right:16px;
}
.b2b-container-visual span{
top:16px;
width:max-content;
padding:8px 10px;
border-radius:999px;
background:#d6ad48;
color:#061b33;
font-size:10px;
font-weight:1000;
text-transform:uppercase;
}
.b2b-container-visual b{
bottom:48px;
font-size:20px;
}
.b2b-container-visual small{
bottom:22px;
color:rgba(255,255,255,0.78);
font-weight:900;
}
.b2b-container-main{
padding:20px;
}
.b2b-container-title{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
}
.b2b-container-title span{
color:#0b8ca3;
font-size:11px;
font-weight:1000;
text-transform:uppercase;
}
.b2b-container-title h3{
margin:5px 0;
color:#102438;
font-size:22px;
line-height:1.15;
}
.b2b-container-title p{
margin:0;
color:#62798a;
font-weight:800;
}
.b2b-container-title button{
display:inline-flex;
align-items:center;
gap:8px;
min-height:38px;
border:0;
border-radius:9px;
background:#061b33;
color:#ffffff;
padding:0 14px;
font-weight:900;
white-space:nowrap;
}
.b2b-vessel-progress-card,
.b2b-status-summary{
margin-bottom:16px;
padding:16px;
border:1px solid #e2ebf1;
border-radius:14px;
background:linear-gradient(180deg, #ffffff, #f8fbfd);
}
.b2b-vessel-route{
display:flex;
align-items:center;
gap:10px;
color:#11283d;
font-size:15px;
font-weight:1000;
}
.b2b-vessel-route i{
color:#1d9cc1;
}
.b2b-vessel-dates,
.b2b-vessel-meta,
.b2b-status-summary{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:12px;
margin-top:14px;
}
.b2b-status-summary{
grid-template-columns:repeat(4, minmax(0, 1fr));
margin-top:0;
}
.b2b-vessel-dates small,
.b2b-vessel-meta small,
.b2b-status-summary small{
display:block;
color:#687c8e;
font-size:10px;
font-weight:1000;
text-transform:uppercase;
}
.b2b-vessel-dates b,
.b2b-vessel-meta b,
.b2b-status-summary b{
display:block;
margin-top:5px;
color:#102438;
font-size:14px;
line-height:1.22;
}
.b2b-vessel-bar{
margin-top:16px;
}
.b2b-vessel-bar > div{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:8px;
}
.b2b-vessel-bar small{
color:#4f6678;
font-size:12px;
font-weight:900;
}
.b2b-vessel-bar strong{
color:#0b77a0;
font-size:13px;
font-weight:1000;
}
.b2b-vessel-bar span{
display:block;
height:12px;
overflow:hidden;
border-radius:999px;
background:#edf2f5;
}
.b2b-vessel-bar i{
display:block;
height:100%;
border-radius:999px;
background:linear-gradient(90deg, #118cd1, #1db5d8);
box-shadow:0 4px 12px rgba(17,140,209,.28);
}
.b2b-vessel-freshness{
margin:12px 0 0;
color:#5d7384;
font-size:12px;
font-weight:900;
}
.b2b-container-facts{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:10px;
}
.b2b-container-facts span{
min-height:70px;
padding:12px;
border:1px solid #e3ecf2;
border-radius:11px;
background:#f8fbfd;
}
.b2b-container-facts small,
.b2b-container-facts b{
display:block;
margin-top:5px;
color:#102438;
font-size:12px;
line-height:1.28;
}
.b2b-container-side{
padding:18px;
border-left:1px solid #edf1f4;
background:#fbfdfe;
}
.b2b-container-side h4{
margin:0 0 10px;
color:#102438;
font-size:13px;
text-transform:uppercase;
}
.b2b-container-side h4:not(:first-child){
margin-top:18px;
}
.b2b-route-leg-list,
.b2b-container-events{
display:grid;
gap:9px;
}
.b2b-route-leg-list span,
.b2b-container-events span{
display:grid;
grid-template-columns:34px 1fr;
gap:2px 10px;
padding:10px;
border:1px solid #e2ebf1;
border-radius:11px;
background:#ffffff;
}
.b2b-route-leg-list i,
.b2b-container-events i{
grid-row:1 / span 3;
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:50%;
background:#e6f8fb;
color:#0a8fa6;
}
.b2b-route-leg-list b,
.b2b-container-events b{
color:#102438;
font-size:12px;
}
.b2b-route-leg-list em{
color:#d09a2f;
font-size:11px;
font-style:normal;
font-weight:1000;
}
.b2b-container-events .current{
border-color:#d6ad48;
background:#fffaf0;
}
.b2b-container-events .current i{
background:#fff1cc;
color:#b9821b;
}
.b2b-container-events .upcoming{
opacity:.72;
}
.b2b-container-events .upcoming i{
background:#eef4f7;
color:#7b91a1;
}
.b2b-shipment-modal{
position:fixed;
inset:0;
z-index:100;
display:none;
}
.b2b-shipment-modal.is-open{
display:block;
}
.b2b-modal-backdrop{
position:absolute;
inset:0;
background:rgba(4,18,32,0.62);
backdrop-filter:blur(7px);
}
.b2b-modal-card{
position:relative;
width:min(1340px, calc(100vw - 44px));
max-height:calc(100vh - 44px);
margin:22px auto;
padding:0 !important;
overflow:auto;
border:1px solid rgba(160,188,214,0.36);
border-radius:18px;
background:#ffffff;
box-shadow:0 28px 90px rgba(3,17,31,0.42);
}
.b2b-modal-close{
position:absolute;
top:16px;
right:16px;
z-index:2;
display:grid;
place-items:center;
width:38px;
height:38px;
border:0;
border-radius:50%;
background:transparent;
color:#ffffff;
font-size:22px;
}
.b2b-modal-hero{
display:grid;
grid-template-columns:350px minmax(0, 1fr);
min-height:198px;
background:radial-gradient(circle at 72% 16%, rgba(22,139,211,.28), transparent 0 34%), linear-gradient(135deg, #06203d 0%, #031629 100%);
color:#ffffff;
}
.b2b-modal-hero img{
width:100%;
height:100%;
min-height:198px;
object-fit:cover;
}
.b2b-modal-hero-copy{
display:grid;
align-content:center;
gap:8px;
padding:30px 70px 30px 38px;
}
.b2b-modal-hero-copy > span{
width:max-content;
padding:8px 16px;
border-radius:999px;
background:linear-gradient(135deg, #f2cf61, #d6ad48);
color:#061b33;
font-size:12px;
font-weight:900;
text-transform:uppercase;
}
.b2b-modal-hero h2{
margin:0;
color:#ffffff;
font-size:38px;
line-height:1.05;
}
.b2b-modal-hero p{
margin:0;
color:rgba(255,255,255,0.76);
font-weight:800;
font-size:18px;
}
.b2b-current-strip{
display:inline-grid;
grid-template-columns:auto minmax(0, 1fr);
width:max-content;
max-width:100%;
margin-top:6px;
border:1px solid rgba(144,188,220,0.36);
border-radius:7px;
overflow:hidden;
background:rgba(4,20,39,0.45);
}
.b2b-current-strip b,
.b2b-current-strip strong{
display:flex;
align-items:center;
min-height:34px;
padding:0 14px;
color:#fff;
font-size:12px;
line-height:1.25;
}
.b2b-current-strip b{
gap:9px;
color:#35adf5;
text-transform:uppercase;
}
.b2b-current-strip b i{
width:12px;
height:12px;
border-radius:50%;
background:#159fed;
box-shadow:0 0 0 4px rgba(21,159,237,.18);
}
.b2b-current-strip strong{
border-left:1px solid rgba(144,188,220,0.22);
font-weight:800;
}
.b2b-detail-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:1px;
padding:1px;
background:#dbe5ed;
}
.b2b-detail-grid span{
display:block;
min-height:58px;
padding:11px 20px;
background:#ffffff;
}
.b2b-detail-grid small,
.b2b-detail-product small{
display:block;
color:#516b83;
font-size:11px;
font-weight:900;
text-transform:uppercase;
}
.b2b-detail-grid b{
display:block;
margin-top:6px;
color:#102438;
font-size:15px;
line-height:1.35;
}
.b2b-detail-progress{
margin:0 8px;
padding:11px 10px 13px;
border:1px solid #d9e5ee;
border-radius:9px;
background:#ffffff;
}
.b2b-detail-progress h3,
.b2b-documents-panel h3{
margin:0 0 12px;
color:#48647d;
font-size:13px;
font-weight:1000;
letter-spacing:.05em;
text-transform:uppercase;
}
.b2b-detail-track{
--track-progress:0%;
position:relative;
display:grid;
grid-template-columns:repeat(9, minmax(76px, 1fr));
gap:8px;
align-items:start;
padding:0 16px;
}
.b2b-detail-track::before,
.b2b-detail-track::after{
content:"";
position:absolute;
left:54px;
right:54px;
top:20px;
height:2px;
background:repeating-linear-gradient(90deg, #9ca9b7 0 8px, transparent 8px 13px);
}
.b2b-detail-track::after{
right:auto;
width:calc((100% - 108px) * var(--track-progress) / 100);
background:#20a864;
}
.b2b-detail-track span{
position:relative;
z-index:1;
display:grid;
justify-items:center;
gap:6px;
text-align:center;
}
.b2b-detail-track i{
display:grid;
place-items:center;
width:42px;
height:42px;
border:2px solid #bdc8d2;
border-radius:50%;
background:#fff;
color:#6e7e8b;
font-size:16px;
}
.b2b-detail-track b{
max-width:96px;
color:#102438;
font-size:11px;
line-height:1.18;
font-weight:1000;
}
.b2b-detail-track small{
color:#334c61;
font-size:10px;
line-height:1.2;
font-weight:800;
}
.b2b-detail-track .is-done i{
border-color:#18a75f;
color:#18a75f;
box-shadow:0 0 0 4px rgba(24,167,95,.11);
}
.b2b-detail-track .is-current i{
border-color:#168fe0;
color:#168fe0;
box-shadow:0 0 0 4px rgba(22,143,224,.12);
}
.b2b-detail-track .is-done b,
.b2b-detail-track .is-done small{ color:#14834d; }
.b2b-detail-track .is-current b,
.b2b-detail-track .is-current small{ color:#087bd0; }
.b2b-documents-panel{
padding:10px 14px 0;
}
.b2b-documents-grid{
display:grid;
grid-template-columns:repeat(6, minmax(0, 1fr));
gap:12px;
}
.b2b-document-card{
display:grid;
grid-template-rows:auto auto 1fr auto;
min-height:132px;
padding:11px 11px 10px;
border:1px solid #dbe6ef;
border-radius:9px;
background:#ffffff;
text-align:center;
box-shadow:0 8px 20px rgba(6,27,51,.04);
}
.b2b-document-icon{
display:grid;
place-items:center;
width:34px;
height:34px;
margin:0 auto 6px;
border-radius:8px;
background:#f3f6f8;
color:#d34b45;
font-size:17px;
}
.b2b-document-card.is-locked .b2b-document-icon{
color:#061b33;
}
.b2b-document-copy b{
display:block;
color:#102438;
font-size:13px;
line-height:1.2;
font-weight:1000;
}
.b2b-document-copy small{
display:block;
margin-top:2px;
color:#425a70;
font-size:11px;
font-weight:800;
}
.b2b-document-state{
display:grid;
justify-items:center;
align-content:center;
gap:5px;
min-height:38px;
margin:5px 0 8px;
color:#0c2237;
font-size:11px;
line-height:1.18;
font-weight:800;
}
.b2b-document-state i{
color:#061b33;
font-size:16px;
}
.b2b-document-card.is-available .b2b-document-state i{ color:#0b8652; }
.b2b-document-card.is-locked .b2b-document-state span b,
.b2b-document-card.is-locked .b2b-document-state span{ color:#0b6db0; }
.b2b-document-card button,
.b2b-modal-footer button{
width:100%;
min-height:34px;
border:0;
border-radius:7px;
background:#061b33;
color:#fff;
font-size:12px;
font-weight:1000;
cursor:pointer;
}
.b2b-document-card.is-locked button{
background:linear-gradient(135deg, #e9c65a, #d6ad48);
color:#061b33;
}
.b2b-document-card button:disabled{
cursor:not-allowed;
background:#d9e1e8;
color:#667989;
}
.b2b-detail-product{
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(380px, .75fr);
gap:16px;
align-items:center;
margin:16px 14px 22px;
padding:14px;
border:1px solid #dfe8ef;
border-radius:9px;
background:#f7fafc;
}
.b2b-detail-product-main{
display:grid;
grid-template-columns:86px minmax(0, 1fr);
gap:16px;
align-items:center;
}
.b2b-detail-product img{
width:86px;
height:64px;
object-fit:contain;
border-radius:10px;
background:#ffffff;
}
.b2b-detail-product b,
.b2b-detail-product span{
display:block;
}
.b2b-detail-product b{
margin-top:6px;
color:#102438;
font-size:18px;
}
.b2b-detail-product span{
margin-top:4px;
color:#5d7384;
font-weight:800;
}
.b2b-detail-quantity{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:1px;
}
.b2b-detail-quantity span{
padding:4px 18px;
border-left:1px solid #b7c5d0;
}
.b2b-detail-quantity b{
display:block;
margin-top:6px;
color:#102438;
font-size:15px;
font-weight:1000;
}
.b2b-detail-quantity .available b{
color:#078747;
}
.b2b-modal-footer{
display:flex;
justify-content:flex-end;
padding:0 26px 14px;
}
.b2b-modal-footer button{
width:82px;
}
.b2b-lux-detail{
width:min(1536px, calc(100vw - 34px));
max-height:calc(100vh - 34px);
margin:17px auto;
border-radius:14px;
background:#f6f9fc;
color:#071b33;
}
.b2b-lux-detail .b2b-modal-close{
top:12px;
right:14px;
color:#071b33;
background:rgba(255,255,255,.76);
box-shadow:0 10px 24px rgba(7,27,51,.12);
}
.b2b-lux-topbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
min-height:56px;
padding:0 30px;
border-bottom:1px solid #d9e4ed;
background:#ffffff;
}
.b2b-lux-topbar a{
display:inline-flex;
align-items:center;
gap:9px;
color:#12304b;
text-decoration:none;
font-size:14px;
font-weight:800;
}
.b2b-lux-topbar nav{
display:flex;
gap:12px;
margin-right:40px;
}
.b2b-lux-topbar button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:36px;
min-width:126px;
border:1px solid #d7e3ed;
border-radius:7px;
background:#061b33;
color:#ffffff;
font-weight:900;
cursor:pointer;
}
.b2b-lux-topbar button.primary{
border-color:#0759df;
background:#0759df;
}
.b2b-lux-hero{
display:grid;
grid-template-columns:400px minmax(0,1fr) 374px;
gap:22px;
padding:20px 30px 18px;
background:#ffffff;
}
.b2b-lux-hero figure{
position:relative;
min-height:212px;
margin:0;
overflow:hidden;
border:1px solid #d8e3eb;
border-radius:10px;
background:#eaf1f6;
box-shadow:0 14px 34px rgba(6,27,51,.08);
}
.b2b-lux-hero figure img{
width:100%;
height:100%;
object-fit:cover;
}
.b2b-lux-hero figure > span{
position:absolute;
top:14px;
left:14px;
z-index:1;
padding:7px 13px;
border-radius:7px;
background:#0759df;
color:#ffffff;
font-size:11px;
font-weight:1000;
text-transform:uppercase;
box-shadow:0 10px 24px rgba(4,67,163,.28);
}
.b2b-lux-hero-main{
display:grid;
align-content:center;
min-width:0;
}
.b2b-lux-titleline{
display:flex;
align-items:center;
gap:16px;
min-width:0;
}
.b2b-lux-titleline h2{
margin:0;
color:#030e1d;
font-size:40px;
line-height:1;
letter-spacing:0;
}
.b2b-lux-titleline em{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:999px;
background:#e8f6eb;
color:#32864f;
font-size:11px;
font-style:normal;
font-weight:1000;
text-transform:uppercase;
}
.b2b-lux-hero-main > p{
margin:14px 0 16px;
color:#071b33;
font-size:20px;
font-weight:900;
}
.b2b-lux-detail .b2b-current-strip{
display:flex;
width:100%;
margin:0 0 14px;
border-color:#d6e2ec;
background:#f8fbfd;
}
.b2b-lux-detail .b2b-current-strip b,
.b2b-lux-detail .b2b-current-strip strong,
.b2b-lux-detail .b2b-current-strip small{
min-height:34px;
color:#071b33;
}
.b2b-lux-detail .b2b-current-strip b{
color:#0759df;
background:#f0f6ff;
}
.b2b-lux-detail .b2b-current-strip strong{
border-left:1px solid #d8e3eb;
background:#0759df;
color:#ffffff;
}
.b2b-lux-detail .b2b-current-strip small{
display:flex;
align-items:center;
min-width:0;
padding:0 12px;
color:#546a7d;
font-size:12px;
font-weight:800;
}
.b2b-lux-facts{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
border:1px solid #dce6ee;
border-radius:9px;
background:#ffffff;
box-shadow:0 10px 28px rgba(6,27,51,.05);
}
.b2b-lux-facts span{
min-height:72px;
padding:13px 15px;
border-right:1px solid #e2eaf1;
}
.b2b-lux-facts span:last-child{ border-right:0; }
.b2b-lux-facts small,
.b2b-lux-update-card small,
.b2b-lux-summary-card small{
display:block;
color:#617589;
font-size:10px;
font-weight:1000;
text-transform:uppercase;
}
.b2b-lux-facts b{
display:block;
margin-top:7px;
color:#071b33;
font-size:13px;
line-height:1.35;
font-weight:1000;
}
.b2b-lux-update-card,
.b2b-lux-summary-card,
.b2b-lux-panel{
border:1px solid #dbe6ef;
border-radius:11px;
background:#ffffff;
box-shadow:0 12px 28px rgba(6,27,51,.06);
}
.b2b-lux-update-card{
display:grid;
align-content:start;
gap:12px;
padding:18px;
}
.b2b-lux-update-card > b{
display:block;
padding-bottom:12px;
border-bottom:1px solid #e5edf3;
color:#071b33;
font-size:15px;
}
.b2b-lux-update-card em{
display:inline-flex;
margin-left:8px;
padding:3px 7px;
border-radius:999px;
background:#e3f7e8;
color:#16884a;
font-size:10px;
font-style:normal;
}
.b2b-lux-update-card span,
.b2b-lux-summary-card span{
display:block;
padding-bottom:12px;
border-bottom:1px solid #e6edf3;
color:#071b33;
font-weight:900;
}
.b2b-lux-update-card span:last-child,
.b2b-lux-summary-card span:last-of-type{ border-bottom:0; }
.b2b-lux-update-card strong{
display:block;
margin-bottom:5px;
color:#617589;
font-size:10px;
text-transform:uppercase;
}
.b2b-lux-detail .b2b-detail-progress{
margin:0 30px 14px;
padding:16px 18px 18px;
border-radius:11px;
box-shadow:0 12px 28px rgba(6,27,51,.05);
}
.b2b-lux-detail .b2b-detail-track{
grid-template-columns:repeat(10,minmax(84px,1fr));
gap:7px;
padding:0 12px;
}
.b2b-lux-detail .b2b-detail-track::before,
.b2b-lux-detail .b2b-detail-track::after{
left:50px;
right:50px;
}
.b2b-lux-detail .b2b-detail-track::after{
width:calc((100% - 100px) * var(--track-progress) / 100);
background:#1aa664;
}
.b2b-lux-detail .b2b-detail-track i{
width:38px;
height:38px;
font-size:15px;
}
.b2b-lux-detail .b2b-detail-track b{
max-width:92px;
font-size:10px;
}
.b2b-lux-detail .b2b-detail-track small{
font-size:9px;
}
.b2b-lux-grid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(300px,.72fr) minmax(370px,.9fr) 246px;
gap:14px;
padding:0 30px 14px;
}
.b2b-lux-panel{
min-height:236px;
padding:15px;
}
.b2b-lux-panel-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
margin-bottom:12px;
}
.b2b-lux-panel-head h3,
.b2b-lux-summary-card h3{
margin:0;
color:#071b33;
font-size:14px;
font-weight:1000;
text-transform:uppercase;
}
.b2b-lux-panel-head button{
border:0;
background:transparent;
color:#0759df;
font-size:12px;
font-weight:1000;
cursor:pointer;
}
.b2b-lux-products{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr)) 86px;
gap:10px;
}
.b2b-lux-products article{
position:relative;
min-height:174px;
padding:10px;
border:1px solid #e0e8ef;
border-radius:9px;
background:#ffffff;
}
.b2b-lux-products img{
width:100%;
height:76px;
object-fit:contain;
border-radius:7px;
background:#f3f7fa;
}
.b2b-lux-products em{
display:block;
margin-top:8px;
color:#516b83;
font-size:10px;
font-style:normal;
font-weight:1000;
text-transform:uppercase;
}
.b2b-lux-products b{
display:block;
margin-top:5px;
color:#071b33;
font-size:14px;
}
.b2b-lux-products span{
display:block;
margin-top:3px;
color:#63798b;
font-size:11px;
font-weight:800;
}
.b2b-lux-products strong{
display:block;
margin-top:8px;
color:#071b33;
font-size:13px;
}
.b2b-lux-products strong small{
color:#63798b;
font-size:10px;
}
.b2b-lux-products article i{
position:absolute;
right:10px;
top:72px;
padding:3px 7px;
border-radius:5px;
background:#eaf3ff;
color:#0759df;
font-size:10px;
font-style:normal;
font-weight:1000;
}
.b2b-lux-more{
display:grid;
place-items:center;
align-content:center;
gap:7px;
border:1px solid #e0e8ef;
border-radius:9px;
background:#f9fbfd;
color:#7a8793;
font-size:22px;
font-weight:1000;
cursor:pointer;
}
.b2b-lux-more span{
color:#354d63;
font-size:12px;
}
.b2b-lux-docs{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.b2b-lux-docs article{
display:grid;
justify-items:center;
align-content:center;
gap:4px;
min-height:82px;
padding:9px;
border:1px solid #e0e8ef;
border-radius:9px;
background:#ffffff;
text-align:center;
}
.b2b-lux-docs i{
color:#d7473f;
font-size:19px;
}
.b2b-lux-docs .is-locked i{ color:#071b33; }
.b2b-lux-docs b{
color:#071b33;
font-size:11px;
line-height:1.15;
}
.b2b-lux-docs small{
color:#667b8e;
font-size:10px;
font-weight:800;
}
.b2b-lux-docs button{
min-height:24px;
min-width:70px;
border:0;
border-radius:6px;
background:#dff5e6;
color:#16884a;
font-size:10px;
font-weight:1000;
cursor:pointer;
}
.b2b-lux-docs .is-locked button{
background:#ffe5a8;
color:#7d5609;
}
.b2b-lux-docs button:disabled{
background:#e6edf3;
color:#718292;
cursor:not-allowed;
}
.b2b-lux-photo-gallery{
display:grid;
grid-template-columns:minmax(0,1fr) 150px;
gap:10px;
}
.b2b-lux-photo-gallery figure{
margin:0;
overflow:hidden;
border-radius:9px;
background:#eaf1f6;
}
.b2b-lux-photo-gallery figure img{
width:100%;
height:176px;
object-fit:cover;
}
.b2b-lux-photo-gallery > div{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.b2b-lux-photo-gallery > div img,
.b2b-lux-photo-gallery button{
width:100%;
height:84px;
border:0;
border-radius:8px;
object-fit:cover;
}
.b2b-lux-photo-gallery button{
background:linear-gradient(135deg, rgba(5,20,39,.82), rgba(5,20,39,.96));
color:#ffffff;
font-size:22px;
font-weight:1000;
cursor:pointer;
}
.b2b-lux-summary-card{
display:grid;
align-content:start;
gap:10px;
padding:17px;
}
.b2b-lux-summary-card b{
display:block;
margin-top:5px;
color:#071b33;
font-size:12px;
line-height:1.35;
}
.b2b-lux-summary-card button{
min-height:32px;
border:1px solid #0759df;
border-radius:7px;
background:#ffffff;
color:#0759df;
font-weight:1000;
cursor:pointer;
}
.b2b-lux-commercial{
padding:0 30px 16px;
}
.b2b-lux-commercial .b2b-commercial-products{
margin:0;
padding:14px 16px 4px;
border-radius:11px;
box-shadow:0 12px 28px rgba(6,27,51,.06);
}
.b2b-lux-commercial .b2b-commercial-head{
margin-bottom:10px;
}
.b2b-lux-commercial .b2b-commercial-head h3{
font-size:17px;
}
.b2b-lux-commercial .b2b-commercial-head p{
max-width:520px;
font-size:12px;
}
.b2b-lux-commercial .b2b-commercial-list{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.b2b-lux-commercial .b2b-commercial-product{
grid-template-columns:82px minmax(0,1fr) 260px;
gap:12px;
padding:10px;
}
.b2b-lux-commercial .b2b-commercial-product > img{
width:82px;
height:68px;
}
.b2b-lux-commercial .b2b-commercial-copy h4{
font-size:16px;
}
.b2b-lux-commercial .b2b-commercial-copy p{
margin-bottom:8px;
font-size:12px;
}
.b2b-lux-commercial .b2b-availability-line{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.b2b-lux-commercial .b2b-availability-line span{
padding:6px 7px;
}
.b2b-lux-commercial .b2b-availability-line b{
font-size:13px;
}
.b2b-lux-commercial .b2b-commercial-action{
gap:7px;
}
.b2b-lux-commercial .b2b-commercial-action input{
height:36px;
}
.b2b-lux-login-note{
display:flex;
flex-wrap:wrap;
gap:28px;
align-items:center;
margin-top:0;
padding:11px 16px;
border-radius:0 0 10px 10px;
background:#fff6e8;
color:#5b6170;
font-size:12px;
font-weight:800;
}
.b2b-lux-login-note span{
display:inline-flex;
align-items:center;
gap:8px;
}
.b2b-lux-login-note i{
color:#8b8f98;
}
.b2b-lux-technical,
.b2b-lux-activity{
margin:0 30px 14px;
border:1px solid #dbe6ef;
border-radius:11px;
background:#ffffff;
box-shadow:0 12px 28px rgba(6,27,51,.04);
}
.b2b-lux-technical summary,
.b2b-lux-activity summary{
padding:12px 16px;
color:#0759df;
font-weight:1000;
cursor:pointer;
}
.b2b-lux-trust-strip{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px;
padding:18px 30px;
background:linear-gradient(135deg,#041a31,#062b4e);
color:#ffffff;
}
.b2b-lux-trust-strip span{
display:grid;
grid-template-columns:42px minmax(0,1fr);
align-items:center;
column-gap:12px;
padding:0 22px;
border-right:1px solid rgba(255,255,255,.14);
}
.b2b-lux-trust-strip span:last-child{ border-right:0; }
.b2b-lux-trust-strip i{
grid-row:1 / span 2;
display:grid;
place-items:center;
width:42px;
height:42px;
border:1px solid rgba(255,255,255,.28);
border-radius:50%;
color:#ffffff;
}
.b2b-lux-trust-strip b{
font-size:14px;
}
.b2b-lux-trust-strip small{
color:rgba(255,255,255,.72);
font-size:11px;
}
.b2b-lux-empty{
margin:0;
padding:18px;
border:1px dashed #cfdce6;
border-radius:9px;
background:#f8fbfd;
color:#607589;
font-weight:800;
}
.b2b-confidence-strip{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:14px 16px 4px;
}
.b2b-confidence-strip span{
display:inline-flex;
align-items:center;
gap:8px;
min-height:34px;
padding:0 12px;
border:1px solid #d8e8ef;
border-radius:999px;
background:linear-gradient(180deg,#ffffff,#f6fbfd);
color:#0b6e86;
font-size:12px;
font-weight:1000;
box-shadow:0 8px 22px rgba(6,27,51,.04);
}
.b2b-confidence-strip i{
color:#0a8ea8;
}
.b2b-commercial-products{
margin:16px 14px 22px;
padding:16px;
border:1px solid #d8e6ef;
border-radius:14px;
background:linear-gradient(180deg,#ffffff 0%,#f7fbfd 100%);
box-shadow:0 14px 34px rgba(6,27,51,.06);
}
.b2b-commercial-head{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
margin-bottom:14px;
}
.b2b-commercial-head small{
display:block;
margin-bottom:5px;
color:#0a8ea8;
font-size:11px;
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
}
.b2b-commercial-head h3{
margin:0;
color:#102438;
font-size:22px;
line-height:1.15;
}
.b2b-commercial-head p{
max-width:430px;
margin:0;
color:#516b83;
font-size:13px;
line-height:1.45;
font-weight:800;
}
.b2b-commercial-list{
display:grid;
gap:12px;
}
.b2b-commercial-product{
display:grid;
grid-template-columns:128px minmax(0,1fr) minmax(260px,.55fr);
gap:16px;
align-items:center;
padding:13px;
border:1px solid #dfe9f0;
border-radius:12px;
background:#ffffff;
}
.b2b-commercial-product > img{
width:128px;
height:104px;
object-fit:contain;
border-radius:12px;
background:#f2f6f8;
}
.b2b-commercial-copy small{
display:block;
color:#0a8ea8;
font-size:11px;
font-weight:1000;
text-transform:uppercase;
}
.b2b-commercial-copy h4{
margin:4px 0 5px;
color:#102438;
font-size:20px;
line-height:1.15;
}
.b2b-commercial-copy p{
margin:0 0 12px;
color:#60758a;
font-size:13px;
font-weight:800;
}
.b2b-availability-line{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.b2b-availability-line span{
padding:9px 10px;
border:1px solid #e0eaf1;
border-radius:10px;
background:#f9fcfd;
}
.b2b-availability-line b,
.b2b-availability-line small{
display:block;
}
.b2b-availability-line b{
color:#102438;
font-size:16px;
font-weight:1000;
}
.b2b-availability-line small{
margin-top:2px;
color:#687d90;
font-size:10px;
font-weight:900;
text-transform:uppercase;
}
.b2b-availability-bar{
height:8px;
margin-top:10px;
overflow:hidden;
border-radius:999px;
background:#e7f0f5;
}
.b2b-availability-bar i{
display:block;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,#e9c65a,#11a56a);
}
.b2b-commercial-action{
display:grid;
gap:9px;
}
.b2b-commercial-action label{
display:grid;
gap:6px;
color:#435a70;
font-size:11px;
font-weight:1000;
text-transform:uppercase;
}
.b2b-commercial-action input{
width:100%;
height:42px;
border:1px solid #cbdbe7;
border-radius:10px;
padding:0 12px;
color:#102438;
font-size:15px;
font-weight:900;
}
.b2b-quick-qty,
.b2b-commercial-buttons{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.b2b-quick-qty button,
.b2b-commercial-buttons button{
border:1px solid #cfdeea;
border-radius:10px;
background:#fff;
color:#102438;
font-size:12px;
font-weight:1000;
cursor:pointer;
}
.b2b-quick-qty button{
min-height:32px;
padding:0 10px;
}
.b2b-price-note{
display:flex;
justify-content:space-between;
gap:10px;
padding:9px 10px;
border:1px solid #e7d597;
border-radius:10px;
background:#fff8dc;
}
.b2b-price-note b,
.b2b-price-note small{
display:block;
}
.b2b-price-note b{
color:#76540b;
font-size:13px;
font-weight:1000;
}
.b2b-price-note small{
color:#8a6a1c;
font-size:11px;
font-weight:900;
}
.b2b-commercial-buttons button{
flex:1 1 112px;
min-height:40px;
padding:0 12px;
}
.b2b-commercial-buttons button.primary{
border-color:#061b33;
background:#061b33;
color:#fff;
}
.b2b-commercial-buttons button.is-disabled{
border-color:#dce5eb;
background:#e9eef2;
color:#6d7e8b;
cursor:not-allowed;
}
.b2b-purchase-selector{
overflow:visible;
}
.b2b-purchase-dropdown{
position:relative;
z-index:3;
margin-bottom:12px;
}
.b2b-purchase-dropdown summary{
display:grid;
grid-template-columns:minmax(0, 1fr) auto minmax(180px, .5fr) 34px;
align-items:center;
gap:14px;
min-height:72px;
padding:14px 16px;
border:1px solid rgba(12,53,80,.13);
border-radius:15px;
background:linear-gradient(180deg,#ffffff,#f6fbfd);
color:#071b33;
list-style:none;
cursor:pointer;
box-shadow:0 16px 36px rgba(6,27,51,.08);
}
.b2b-purchase-dropdown summary::-webkit-details-marker{ display:none; }
.b2b-purchase-dropdown summary span{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}
.b2b-purchase-dropdown summary span i{
display:grid;
place-items:center;
width:42px;
height:42px;
border-radius:13px;
background:linear-gradient(135deg,#0b9faf,#0759df);
color:#ffffff;
}
.b2b-purchase-dropdown summary b{
font-size:19px;
line-height:1.1;
}
.b2b-purchase-dropdown summary strong{
color:#0b7b8a;
font-size:18px;
font-weight:1000;
}
.b2b-purchase-dropdown summary small{
color:#607589;
font-size:12px;
font-weight:850;
}
.b2b-purchase-dropdown summary > i{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:50%;
background:#eef6fa;
color:#0759df;
transition:transform .22s ease;
}
.b2b-purchase-dropdown[open] summary > i{
transform:rotate(180deg);
}
.b2b-purchase-menu{
position:absolute;
inset:auto 0 auto 0;
display:grid;
gap:8px;
margin-top:8px;
padding:10px;
border:1px solid rgba(12,53,80,.14);
border-radius:15px;
background:#ffffff;
box-shadow:0 24px 60px rgba(6,27,51,.18);
animation:b2bPurchaseDrop .18s ease-out;
}
.b2b-purchase-menu button{
display:grid;
grid-template-columns:minmax(0,1fr) auto 26px;
align-items:center;
gap:12px;
min-height:66px;
padding:11px 12px;
border:1px solid #dce8ef;
border-radius:12px;
background:#ffffff;
color:#071b33;
text-align:left;
cursor:pointer;
}
.b2b-purchase-menu button[data-is-disabled="1"]{
opacity:.75;
}
.b2b-purchase-menu button span{
display:grid;
grid-template-columns:38px minmax(0,1fr);
gap:10px;
align-items:center;
}
.b2b-purchase-menu button span i{
grid-row:1 / span 2;
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:12px;
background:#eff8fb;
color:#0b9faf;
}
.b2b-purchase-menu button b,
.b2b-purchase-menu button small{
display:block;
}
.b2b-purchase-menu button b{
font-size:14px;
font-weight:1000;
}
.b2b-purchase-menu button small{
color:#607589;
font-size:11px;
font-weight:800;
}
.b2b-purchase-menu button strong{
color:#0b7b8a;
font-size:13px;
font-weight:1000;
}
.b2b-purchase-menu button em{
display:grid;
place-items:center;
width:26px;
height:26px;
border-radius:50%;
background:#e9f4f8;
color:transparent;
font-style:normal;
}
.b2b-purchase-menu button.is-selected{
border-color:#0b9faf;
background:linear-gradient(135deg,#effcff,#f9fdff);
}
.b2b-purchase-menu button.is-selected em{
background:#0b9faf;
color:#ffffff;
}
.b2b-purchase-panels{
display:grid;
gap:12px;
}
.b2b-purchase-panel{
border:1px solid #dfe9f0;
border-radius:14px;
background:#ffffff;
box-shadow:0 16px 36px rgba(6,27,51,.06);
}
.b2b-purchase-selector[data-purchase-mode="partial"] [data-purchase-panel="full"],
.b2b-purchase-selector[data-purchase-mode="full"] [data-purchase-panel="partial-locked"],
.b2b-purchase-selector[data-purchase-mode="full"] [data-purchase-panel="partial-vip"],
.b2b-purchase-selector[data-purchase-mode="partial"][data-vip-access="1"] [data-purchase-panel="partial-locked"],
.b2b-purchase-selector[data-purchase-mode="partial"][data-vip-access="0"] [data-purchase-panel="partial-vip"]{
display:none;
}
.b2b-full-container-panel{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(250px,.34fr);
gap:14px;
padding:14px;
border-color:rgba(11,159,175,.2);
background:linear-gradient(135deg,#ffffff,#f7fbff);
}
.b2b-purchase-panel-copy small,
.b2b-partial-access-panel small{
display:inline-flex;
align-items:center;
gap:7px;
color:#0b8fa2;
font-size:11px;
font-weight:1000;
letter-spacing:.06em;
text-transform:uppercase;
}
.b2b-purchase-panel-copy h4,
.b2b-partial-access-panel h4{
margin:6px 0 6px;
color:#071b33;
font-size:20px;
line-height:1.15;
}
.b2b-purchase-panel-copy p,
.b2b-partial-access-panel p{
margin:0 0 12px;
color:#607589;
font-size:13px;
font-weight:800;
line-height:1.45;
}
.b2b-container-composition{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:12px;
}
.b2b-container-composition span{
display:inline-flex;
align-items:center;
gap:8px;
min-height:34px;
padding:0 10px;
border:1px solid #dce9ef;
border-radius:999px;
background:#f8fcfd;
}
.b2b-container-composition b{
color:#071b33;
font-size:12px;
}
.b2b-container-composition small{
color:#0b7b8a;
font-size:11px;
font-weight:1000;
}
.b2b-partial-access-panel{
display:grid;
grid-template-columns:minmax(0,1fr) 220px;
gap:16px;
align-items:center;
padding:16px;
border-color:rgba(214,161,54,.34);
background:linear-gradient(135deg,#fffdf8,#f8fcff);
}
.b2b-partial-access-panel ul{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:0;
padding:0;
list-style:none;
}
.b2b-partial-access-panel li{
padding:7px 10px;
border:1px solid rgba(214,161,54,.24);
border-radius:999px;
background:#fff8e4;
color:#6f4c05;
font-size:11px;
font-weight:900;
}
.b2b-partial-controls{
padding:14px;
border-color:rgba(11,159,175,.22);
}
.b2b-partial-grid{
display:grid;
grid-template-columns:minmax(220px,.65fr) minmax(210px,.45fr) minmax(180px,.32fr);
gap:12px;
align-items:end;
}
.b2b-partial-product-select,
.b2b-partial-qty{
display:grid;
gap:7px;
color:#435a70;
font-size:11px;
font-weight:1000;
text-transform:uppercase;
}
.b2b-partial-product-select select,
.b2b-partial-qty input{
min-height:44px;
border:1px solid #cbdbe7;
border-radius:12px;
padding:0 12px;
background:#ffffff;
color:#071b33;
font-size:14px;
font-weight:900;
}
.b2b-partial-product-summary{
display:grid;
grid-template-columns:64px minmax(0,1fr);
gap:11px;
align-items:center;
min-height:68px;
padding:9px;
border:1px solid #dfe9f0;
border-radius:14px;
background:#f8fcfd;
}
.b2b-partial-product-summary img{
width:64px;
height:50px;
object-fit:contain;
}
.b2b-partial-product-summary b,
.b2b-partial-product-summary small{
display:block;
}
.b2b-partial-product-summary b{
color:#071b33;
font-size:14px;
}
.b2b-partial-product-summary small{
color:#607589;
font-size:11px;
font-weight:800;
}
.b2b-partial-grid .b2b-quick-qty,
.b2b-partial-grid .b2b-availability-line,
.b2b-partial-grid .b2b-price-note,
.b2b-partial-grid .b2b-commercial-buttons{
grid-column:1 / -1;
}
@keyframes b2bPurchaseDrop{
from{ opacity:0; transform:translateY(-6px); }
to{ opacity:1; transform:translateY(0); }
}
.b2b-bottom-grid{
display:grid;
grid-template-columns:minmax(0, 1fr) 430px;
gap:24px;
margin:28px 0;
}
.b2b-benefits-card,
.b2b-vip-benefits,
.b2b-reserve-panel{
border-radius:15px;
background:#061b33;
color:#ffffff;
box-shadow:0 16px 38px rgba(5,33,55,0.15);
}
.b2b-benefits-card,
.b2b-vip-benefits{ padding:26px; }
.b2b-benefits-card h2,
.b2b-vip-benefits h2{
margin:0 0 18px;
color:#ffffff;
font-size:20px;
}
.b2b-benefits-card > div{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:18px;
}
.b2b-benefits-card span{
display:grid;
gap:6px;
justify-items:center;
text-align:center;
}
.b2b-benefits-card i,
.b2b-vip-benefits i{
color:#d6ad48;
font-size:30px;
}
.b2b-benefits-card b{
color:#ffffff;
font-size:13px;
}
.b2b-benefits-card small,
.b2b-vip-benefits p{
color:rgba(255,255,255,0.72);
line-height:1.5;
}
.b2b-reserve-panel{
display:grid;
grid-template-columns:320px minmax(0, 1fr);
gap:26px;
padding:28px;
overflow:hidden;
background:#ffffff;
color:#102438;
}
.b2b-reserve-panel h2{
margin:0 0 10px;
color:#102438;
font-size:26px;
}
.b2b-reserve-panel p{
color:#5b7181;
line-height:1.7;
}
.b2b-reserve-panel .commercial-form{
width:100%;
max-width:100%;
min-width:0;
padding:0;
border:0;
background:transparent;
box-shadow:none;
}
.b2b-request-focus{
width:100%;
max-width:100%;
min-width:0;
box-sizing:border-box;
gap:16px;
padding:18px;
border:1px solid rgba(11,159,175,0.18);
border-radius:22px;
background:
linear-gradient(135deg, rgba(239,251,252,0.9), rgba(255,251,239,0.92)),
radial-gradient(circle at top right, rgba(216,176,77,0.16), transparent 34%);
box-shadow:0 18px 44px rgba(13,43,67,0.08);
}
.b2b-request-focus-head{
display:flex;
align-items:center;
gap:12px;
padding:0 0 14px;
border-bottom:1px solid rgba(11,159,175,0.13);
}
.b2b-request-focus-head > span{
width:42px;
height:42px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:15px;
background:linear-gradient(135deg, #073047, #0b9faf);
color:#d8b04d;
box-shadow:0 14px 28px rgba(7,48,71,0.16);
}
.b2b-request-focus-head b{
display:block;
color:#073047;
font-size:17px;
line-height:1.15;
}
.b2b-request-focus-head small{
display:block;
margin-top:4px;
color:#657a88;
font-size:12px;
line-height:1.4;
}
.b2b-request-grid{
width:100%;
max-width:100%;
min-width:0;
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:14px;
}
.b2b-smart-field{
min-width:0;
box-sizing:border-box;
padding:12px;
border:1px solid rgba(219,228,235,0.86);
border-radius:17px;
background:rgba(255,255,255,0.78);
box-shadow:0 10px 24px rgba(13,43,67,0.05);
}
.b2b-smart-field label,
.b2b-prebuy-allocation > label{
display:flex;
align-items:center;
gap:7px;
color:#173f56 !important;
font-size:12px !important;
font-weight:900 !important;
}
.b2b-smart-field label i,
.b2b-prebuy-allocation > label i{
color:#0b9faf;
font-size:12px;
}
.b2b-smart-field select,
.b2b-smart-field input{
width:100%;
min-width:0;
box-sizing:border-box;
min-height:48px;
border-radius:13px !important;
background:#ffffff !important;
color:#102438 !important;
font-weight:750;
text-overflow:ellipsis;
}
.b2b-quantity-field input{
border-color:rgba(11,159,175,0.28) !important;
background:linear-gradient(135deg, #ffffff, #f1fbfc) !important;
font-size:16px !important;
}
.b2b-prebuy-allocation,
.b2b-delivery-window{
display:none;
}
.commercial-form.is-prebuy-mode .b2b-prebuy-allocation{
display:flex;
}
.b2b-prebuy-allocation{
min-width:0;
box-sizing:border-box;
padding:12px;
border:1px solid rgba(216,176,77,0.22);
border-radius:17px;
background:rgba(255,255,255,0.76);
}
.b2b-allocation-options{
width:100%;
min-width:0;
display:grid;
grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);
gap:10px;
}
.b2b-allocation-options label{
min-height:48px;
display:flex;
align-items:center;
gap:8px;
min-width:0;
box-sizing:border-box;
padding:10px 12px;
border:1px solid #dbe4eb;
border-radius:14px;
background:#f8fbfd;
color:#102438;
font-size:12px;
font-weight:800;
line-height:1.2;
}
.b2b-allocation-options input{
flex:0 0 auto;
width:auto !important;
accent-color:#0b9faf;
}
.b2b-allocation-options label span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}
.b2b-allocation-options .is-locked{
position:relative;
opacity:.72;
background:#f4f7f9;
color:#6b7b86;
flex-wrap:wrap;
}
.b2b-allocation-options .is-locked em{
flex:0 0 auto;
margin-left:auto;
padding:4px 7px;
border-radius:999px;
background:#fff1c6;
color:#8a650f;
font-size:8.5px;
font-style:normal;
font-weight:900;
letter-spacing:.05em;
white-space:nowrap;
}
.b2b-prebuy-allocation small{
color:#6f8190;
font-size:12px;
line-height:1.45;
}
.commercial-form .field label small{
color:#7a8e9b;
font-size:11px;
font-weight:800;
}
.b2b-email-verification{
padding:16px;
border:1px solid rgba(11,159,175,0.24);
border-radius:18px;
background:
linear-gradient(135deg, rgba(239,251,252,0.96), rgba(255,249,232,0.96)),
radial-gradient(circle at top right, rgba(11,159,175,0.13), transparent 35%);
box-shadow:0 14px 34px rgba(13,43,67,0.08);
}
.b2b-email-verification > div:first-child{
display:flex;
gap:12px;
align-items:center;
margin-bottom:13px;
}
.b2b-email-verification > div:first-child span{
width:40px;
height:40px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:14px;
background:#073047;
color:#d8b04d;
}
.b2b-email-verification b{
display:block;
color:#073047;
font-size:15px;
line-height:1.2;
}
.b2b-email-verification small{
display:block;
margin-top:4px;
color:#5e7381;
font-size:12px;
line-height:1.45;
}
.b2b-verification-row{
display:grid;
grid-template-columns:minmax(0, 1fr) auto;
gap:10px;
align-items:center;
}
.b2b-verification-row input{
min-height:48px;
text-align:center;
letter-spacing:.24em;
font-size:18px !important;
font-weight:900;
}
.b2b-verification-row .btn{
min-height:48px;
white-space:nowrap;
}
.commercial-form.is-awaiting-code .b2b-email-verification{
display:block;
}
.commercial-form.is-prebuy-mode .b2b-delivery-window{
display:block;
}
.b2b-delivery-window{
padding:14px 16px;
border:1px solid rgba(11,159,175,0.2);
border-radius:16px;
background:linear-gradient(135deg, #effbfc, #fff9e8);
color:#28485b;
font-size:13px;
line-height:1.55;
}
.b2b-delivery-window b{
color:#073047;
}
.b2b-delivery-window small{
display:block;
margin-top:3px;
color:#657a88;
}
.commercial-form.is-prebuy-mode [name="request_type"]:disabled,
.commercial-form.is-prebuy-mode [name="quantity_mt"][readonly]{
background:#f1f7f9;
border-color:rgba(11,159,175,0.26);
color:#073047;
cursor:not-allowed;
}
.b2b-source-freshness{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:12px;
margin:16px 22px 0;
}
.b2b-source-freshness div{
padding:16px;
border:1px solid rgba(11,159,175,0.18);
border-radius:14px;
background:linear-gradient(135deg, #f5fbfc, #ffffff);
}
.b2b-source-freshness small,
.b2b-section-titleline small{
display:block;
color:#0b8c9d;
font-size:11px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}
.b2b-source-freshness b{
display:block;
margin:4px 0;
color:#061b33;
font-size:15px;
}
.b2b-source-freshness span{
color:#64798a;
font-size:12px;
font-weight:800;
}
.b2b-verified-activity,
.b2b-eta-history,
.b2b-inside-container{
margin:16px 22px 0;
padding:18px;
border:1px solid #dde8ee;
border-radius:16px;
background:#ffffff;
box-shadow:0 12px 30px rgba(7,38,61,0.06);
}
.b2b-section-titleline h3{
margin:4px 0 14px;
color:#061b33;
font-size:19px;
}
.b2b-activity-list{
display:grid;
gap:10px;
}
.b2b-activity-list article{
display:grid;
grid-template-columns:30px 1fr;
gap:10px;
padding:12px;
border:1px solid #edf2f5;
border-radius:12px;
background:#fbfdfe;
}
.b2b-activity-list i{
display:grid;
place-items:center;
width:30px;
height:30px;
border-radius:50%;
background:#e7f8fa;
color:#0b9faf;
}
.b2b-activity-list b{
display:block;
color:#061b33;
font-size:14px;
}
.b2b-activity-list p{
margin:3px 0;
color:#415b6d;
font-size:13px;
line-height:1.45;
}
.b2b-activity-list small,
.b2b-eta-list small,
.b2b-inside-container p{
color:#6b7f8d;
font-size:12px;
font-weight:800;
}
.b2b-eta-list{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;
}
.b2b-eta-list span{
display:grid;
gap:3px;
padding:12px;
border-radius:12px;
background:#f4fafb;
}
.b2b-eta-list b{
color:#061b33;
}
.b2b-evidence-photo-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:12px;
}
.b2b-evidence-photo-grid figure{
margin:0;
overflow:hidden;
border:1px solid #dce8ef;
border-radius:14px;
background:#f8fbfc;
}
.b2b-evidence-photo-grid img{
width:100%;
aspect-ratio:4 / 3;
object-fit:cover;
display:block;
}
.b2b-evidence-photo-grid figcaption{
display:grid;
gap:3px;
padding:11px;
}
.b2b-evidence-photo-grid b{
color:#061b33;
font-size:13px;
}
.b2b-evidence-photo-grid span{
color:#637987;
font-size:11px;
font-weight:800;
}
@media (max-width:1240px){
.b2b-customer-panels{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.b2b-allocation-options{
grid-template-columns:1fr;
}
.b2b-allocation-options .is-locked em{
margin-left:0;
}
}
@media (max-width:760px){
.b2b-request-focus{
padding:14px;
border-radius:18px;
}
.b2b-source-freshness,
.b2b-eta-list,
.b2b-evidence-photo-grid{
grid-template-columns:1fr;
}
.b2b-source-freshness,
.b2b-verified-activity,
.b2b-eta-history,
.b2b-inside-container{
margin:12px 10px 0;
padding:14px;
border-radius:13px;
}
.b2b-customer-panels{
grid-template-columns:1fr;
}
.b2b-request-grid{
grid-template-columns:1fr;
gap:12px;
}
.b2b-request-focus-head{
align-items:flex-start;
}
.b2b-request-focus-head b{
font-size:15px;
}
.b2b-smart-field,
.b2b-prebuy-allocation{
padding:10px;
}
.b2b-allocation-options{
grid-template-columns:1fr;
}
.b2b-verification-row{
grid-template-columns:1fr;
}
.b2b-verification-row input{
text-align:left;
}
}
/* B2B layout stability fix: map button and collapsible sidebar resize. */
body.b2b-dashboard-page .b2b-app-shell{
width:100% !important;
min-width:0 !important;
}
body.b2b-dashboard-page .b2b-dash-main,
body.b2b-dashboard-page .b2b-dash-content{
min-width:0 !important;
width:100% !important;
}
@media (min-width:921px){
body.b2b-dashboard-page .b2b-app-shell{
display:grid !important;
grid-template-columns:104px minmax(0, 1fr) !important;
align-items:start !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-open{
grid-template-columns:minmax(248px, 292px) minmax(0, 1fr) !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-sidebar-panel{
display:none !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand{
grid-template-columns:54px !important;
justify-content:center !important;
padding:12px 8px !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand span,
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-sidebar-toggle-icon{
display:none !important;
}
body.b2b-dashboard-page .b2b-market-search-row,
body.b2b-dashboard-page .b2b-title-row,
body.b2b-dashboard-page .b2b-market-visual,
body.b2b-dashboard-page .b2b-board,
body.b2b-dashboard-page .b2b-section{
width:100% !important;
max-width:none !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn{
position:relative !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
z-index:8 !important;
display:none !important;
width:auto !important;
min-width:112px !important;
min-height:42px !important;
margin:-62px 18px 18px auto !important;
grid-template-columns:30px auto !important;
padding:8px 12px !important;
border-radius:999px !important;
transform:none !important;
}
body.b2b-dashboard-page.b2b-market-banner-active .b2b-floating-map-btn{
display:grid !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn > i{
grid-row:auto !important;
width:30px !important;
height:30px !important;
border-radius:50% !important;
font-size:14px !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn span{
display:none !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn b{
font-size:12px !important;
white-space:nowrap !important;
}
}
@media (max-width:920px){
body.b2b-dashboard-page .b2b-app-shell{
display:block !important;
}
body.b2b-dashboard-page .b2b-sidebar-panel{
display:none !important;
}
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-open .b2b-sidebar-panel{
display:block !important;
margin-top:14px !important;
}
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-open .b2b-global-sidebar-nav,
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-open .b2b-help-card{
display:grid !important;
}
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-open{
height:calc(100dvh - var(--b2b-mobile-header-h) - var(--b2b-bottom-nav-h) - 18px) !important;
min-height:0 !important;
}
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-collapsed{
height:auto !important;
min-height:0 !important;
}
body.b2b-dashboard-page .b2b-dash-content{
padding-left:clamp(10px, 3vw, 18px) !important;
padding-right:clamp(10px, 3vw, 18px) !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn{
position:fixed !important;
top:auto !important;
right:14px !important;
bottom:84px !important;
z-index:55 !important;
width:96px !important;
min-height:62px !important;
padding:8px !important;
border-radius:16px !important;
transform:none !important;
}
}
.b2b-customer-panels{
display:grid;
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:18px;
margin:26px 0 0;
padding:0;
}
.b2b-customer-panels article{
min-height:180px;
padding:22px;
border:1px solid #dbe4eb;
border-radius:15px;
background:#ffffff;
box-shadow:0 12px 34px rgba(13,43,67,0.08);
}
.b2b-customer-panels h2{
margin:0 0 14px;
color:#102438;
font-size:18px;
}
.b2b-customer-panels div{
display:grid;
gap:4px;
padding:11px 0;
border-bottom:1px solid #edf1f4;
}
.b2b-customer-panels div:last-child{ border-bottom:0; }
.b2b-customer-panels b{
color:#061b33;
font-size:13px;
}
.b2b-customer-panels span,
.b2b-customer-panels p{
color:#5f7485;
font-size:12px;
line-height:1.5;
font-weight:800;
}
.verification-verified{ color:#159d5b !important; }
.verification-partially_verified{ color:#b27912 !important; }
.verification-unverified{ color:#607789 !important; }
.verification-conflict{ color:#c93434 !important; }
.b2b-mobile-bottom{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:50;
display:none;
grid-template-columns:repeat(4, 1fr);
border-top:1px solid #dbe4eb;
background:#ffffff;
box-shadow:0 -12px 30px rgba(5,33,55,0.12);
}
.b2b-mobile-bottom a{
display:grid;
justify-items:center;
gap:4px;
padding:9px 4px 10px;
color:#061b33;
text-decoration:none;
font-size:11px;
font-weight:900;
}
.b2b-mobile-bottom i{ color:#0a91a8; font-size:17px; }
@media (max-width:1040px){
.b2b-app-shell{ grid-template-columns:180px minmax(0, 1fr); }
.b2b-sidebar{ padding:16px 12px; }
.b2b-dash-brand{ gap:8px; }
.b2b-dash-brand img{ width:36px; height:36px; }
.b2b-dash-brand b{ font-size:18px; }
.b2b-dash-brand small{ font-size:8px; }
.b2b-side-nav{ gap:3px; margin:22px 0 16px; }
.b2b-side-nav a{ min-height:34px; padding:7px 8px; gap:9px; font-size:11px; }
.b2b-side-nav .sub{ min-height:28px; margin-left:20px; font-size:10px; }
.b2b-vip-card,
.b2b-manager-card,
.b2b-insight-card{ border-radius:10px; }
.b2b-vip-card{ padding:14px 10px; }
.b2b-vip-card strong{ font-size:15px; }
.b2b-vip-card p,
.b2b-insight-card p{ font-size:10px; }
.b2b-manager-card{ padding:10px; gap:8px; }
.b2b-manager-card img{ width:36px; height:36px; }
.b2b-dash-content{ padding:14px; }
.b2b-title-row{
grid-template-columns:minmax(210px, .7fr) minmax(420px, 1.3fr);
gap:14px;
margin-bottom:14px;
}
.b2b-title-row h1{ font-size:24px; }
.b2b-title-row p{ font-size:12px; }
.b2b-feature-pills{ gap:10px; }
.b2b-feature-pills span{
grid-template-columns:28px 1fr;
min-height:54px;
padding:9px 10px;
}
.b2b-feature-pills i{ width:28px; height:28px; font-size:12px; }
.b2b-feature-pills b{ font-size:11px; }
.b2b-feature-pills small{ font-size:9px; }
.b2b-live-map{ min-height:220px; border-radius:11px; }
.b2b-route-svg{ inset:34px 108px 18px 24px; width:calc(100% - 244px); height:158px; }
.b2b-route-dot{ min-width:118px; padding:9px 10px; border-radius:7px; }
.b2b-route-dot b{ font-size:9px; }
.b2b-route-dot span{ font-size:9px; }
.b2b-route-dot.origin{ left:26px; top:28px; }
.b2b-route-dot.current{ top:78px; }
.b2b-route-dot.destination{ right:150px; top:34px; }
.b2b-ship-marker{ left:39%; top:130px; padding:8px 10px; }
.b2b-map-summary{ width:134px; padding:18px 12px; }
.b2b-map-summary h3{ font-size:11px; }
.b2b-map-summary strong{ margin-bottom:15px; font-size:17px; }
.b2b-map-summary li{ gap:6px; font-size:10px; }
.b2b-board{ margin-top:12px; }
.b2b-board-toolbar{ gap:8px; margin-bottom:10px; }
.b2b-board-toolbar .b2b-tabs{ flex-wrap:nowrap; gap:7px; }
.b2b-board-toolbar .b2b-tabs button{ height:38px; padding:0 13px; font-size:10px; white-space:nowrap; }
.b2b-board-toolbar label{ gap:6px; font-size:10px; }
.b2b-board-toolbar select{ width:108px; height:38px; font-size:10px; }
.shipment-row{ grid-template-columns:148px minmax(230px, 1fr) minmax(218px, .82fr) 134px; margin-bottom:12px; }
.shipment-photo{ min-height:204px; }
.shipment-photo > span,
.b2b-story-status{ padding:6px 8px; font-size:8px; }
.shipment-photo > b,
.b2b-story-reference{ bottom:42px; font-size:15px; }
.shipment-photo > small,
.b2b-story-route{ bottom:16px; font-size:11px; }
.shipment-info,
.shipment-products,
.shipment-stock{ padding:14px 14px; }
.shipment-info h2{ margin-bottom:13px; font-size:14px; }
.shipment-facts{ gap:12px 14px; }
.shipment-facts small,
.shipment-stock span{ font-size:9px; }
.shipment-facts b,
.shipment-stock b{ font-size:12px; }
.shipment-products h3{ font-size:9px; }
.shipment-products div{ grid-template-columns:42px minmax(0, 1fr) auto; gap:9px; padding:8px 0; }
.shipment-products img{ width:42px; height:34px; }
.shipment-products b,
.shipment-products strong{ font-size:11px; }
.shipment-products small{ font-size:9px; }
.shipment-stock{ gap:8px; }
.shipment-stock a{ min-height:34px; font-size:10px; }
.shipment-mini-tracking{ padding:9px 14px 11px; }
.mini-track-rail{ grid-template-columns:repeat(9, minmax(52px, 1fr)); gap:4px; }
.mini-track-rail b{ font-size:8px; }
.mini-track-rail small{ font-size:7px; }
.b2b-bottom-grid,
.b2b-reserve-panel,
.b2b-customer-panels{ grid-template-columns:1fr 1fr; }
.b2b-bottom-grid{ gap:18px; }
.b2b-benefits-card,
.b2b-vip-benefits{ padding:22px; }
.b2b-benefits-card > div{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
}
@media (max-width:920px){
.b2b-app-shell{ display:block; }
.b2b-sidebar{
position:sticky;
top:0;
z-index:45;
height:auto;
max-height:none;
padding:12px 16px;
overflow:visible;
border-bottom:1px solid rgba(255,255,255,0.12);
box-shadow:0 10px 24px rgba(4,18,32,0.18);
}
.b2b-dash-brand img{
width:38px;
height:38px;
}
.b2b-dash-brand b{ font-size:20px; }
.b2b-dash-brand small{ font-size:9px; }
.b2b-side-nav,
.b2b-vip-card,
.b2b-manager-card,
.b2b-insight-card{
display:none;
}
.b2b-topbar{
position:sticky;
top:63px;
z-index:40;
display:grid;
gap:10px;
min-height:0;
padding:12px 16px;
border-bottom:1px solid #dbe5ec;
background:#ffffff;
color:#061b33;
}
.b2b-search{
max-width:none;
}
.b2b-search input{
height:44px;
border:1px solid #dbe5ec;
border-radius:12px;
background:#f7fafc;
font-size:13px;
}
.b2b-top-actions{
justify-content:space-between;
gap:8px;
}
.b2b-top-actions button{
color:#061b33;
}
.b2b-account{
min-width:0;
}
.b2b-account img{
width:30px;
height:30px;
}
.b2b-account b{
max-width:180px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#061b33;
font-size:11px;
}
.b2b-account small{
color:#a67a20;
font-size:9px;
}
.b2b-feature-pills,
.b2b-benefits-card > div{ grid-template-columns:1fr; }
.b2b-title-row{
display:grid;
grid-template-columns:1fr;
gap:12px;
margin-bottom:12px;
}
.b2b-title-row h1{
font-size:25px;
}
.b2b-feature-pills{
display:flex;
grid-template-columns:none;
gap:10px;
overflow-x:auto;
padding-bottom:2px;
scrollbar-width:none;
}
.b2b-feature-pills::-webkit-scrollbar{
display:none;
}
.b2b-feature-pills{
gap:8px;
}
.b2b-feature-pills span{
flex:0 0 225px;
min-height:52px;
border-radius:12px;
}
.b2b-live-map{
min-height:332px;
border-radius:16px;
}
.b2b-route-svg{ display:none; }
.b2b-route-dot{
left:18px !important;
right:18px !important;
transform:none !important;
width:auto;
min-width:0;
padding:10px 12px;
}
.b2b-route-dot.origin{ top:22px; }
.b2b-route-dot.current{ top:104px; }
.b2b-route-dot.destination{ top:186px; }
.b2b-ship-marker{
left:18px;
right:18px;
top:250px;
justify-content:center;
opacity:.9;
}
.b2b-map-summary{
left:18px;
right:18px;
top:auto;
bottom:18px;
width:auto;
border-radius:12px;
padding:13px;
backdrop-filter:blur(4px);
}
.shipment-row{
grid-template-columns:1fr;
grid-template-areas:
"photo"
"info"
"products"
"tracking"
"stock";
}
.shipment-photo{
min-height:214px;
border-radius:16px 16px 0 0;
}
.shipment-photo > b,
.b2b-story-reference{
font-size:20px;
}
.shipment-info,
.shipment-products,
.shipment-stock{
border-right:0;
border-bottom:1px solid #edf1f4;
}
.shipment-stock{
grid-column:auto;
grid-template-columns:repeat(2, minmax(0, 1fr));
align-content:stretch;
border-bottom:0;
background:#fbfdff;
}
.shipment-stock span{
min-height:54px;
padding:10px;
border:1px solid #e1e9ef;
border-radius:11px;
background:#ffffff;
}
.shipment-stock a{
min-height:42px;
border-radius:11px;
}
.b2b-modal-hero{ grid-template-columns:1fr; }
.b2b-modal-hero img{ min-height:180px; }
.b2b-detail-grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
.b2b-dashboard-page{
background:#f3f7fb;
}
.b2b-sidebar{
position:sticky;
top:0;
z-index:60;
height:118px;
padding:22px 24px 12px;
border-bottom:1px solid #edf1f4;
background:#ffffff;
color:#071b33;
box-shadow:0 8px 22px rgba(7,27,51,0.08);
}
.b2b-dash-brand{
width:max-content;
max-width:245px;
gap:10px;
}
.b2b-dash-brand img{
width:58px;
height:58px;
border:1px solid #e2ecf3;
background:#ffffff;
}
.b2b-dash-brand b{
color:#061b33;
font-size:25px;
letter-spacing:0;
}
.b2b-dash-brand small{
color:#52697a;
font-size:9px;
}
.b2b-topbar{
position:fixed;
top:34px;
right:20px;
left:auto;
z-index:70;
display:block;
min-height:0;
padding:0;
border:0;
background:transparent;
box-shadow:none;
}
.b2b-search,
.b2b-account{
display:none;
}
.b2b-top-actions{
display:flex;
align-items:center;
gap:13px;
}
.b2b-top-actions button{
display:grid;
place-items:center;
width:34px;
height:34px;
padding:0;
color:#061b33;
font-size:24px;
}
.b2b-top-actions button:first-child{
display:none;
}
.b2b-notification-btn em{
position:absolute;
top:-5px;
right:-5px;
display:grid;
place-items:center;
min-width:16px;
height:16px;
padding:0 4px;
border-radius:999px;
background:#ce2335;
color:#ffffff;
font-size:8px;
font-style:normal;
line-height:1;
}
.b2b-vip-icon{
display:grid;
gap:0;
color:#c9972f !important;
font-size:24px !important;
}
.b2b-vip-icon span{
font-size:9px;
line-height:1;
}
.b2b-menu-btn{
display:grid;
}
.b2b-dash-content{
padding:12px 14px 74px;
}
.b2b-title-row{
position:relative;
display:grid;
grid-template-columns:1fr auto;
gap:4px 10px;
align-items:center;
margin:0 0 10px;
padding:0 4px;
}
.b2b-title-row h1{
display:flex;
align-items:center;
gap:10px;
font-size:19px;
line-height:1.1;
}
.b2b-title-row h1 em{
display:inline-flex;
align-items:center;
min-height:21px;
padding:0 9px;
border-radius:999px;
background:#d6ad48;
color:#ffffff;
font-family:"Inter", sans-serif;
font-size:11px;
font-style:normal;
font-weight:900;
}
.b2b-title-row p{
grid-column:1;
margin:0;
color:#061b33;
font-size:13px;
line-height:1.2;
}
.b2b-how-it-works{
grid-row:1 / span 2;
grid-column:2;
display:inline-flex;
align-items:center;
gap:7px;
min-height:36px;
padding:0 12px;
border-radius:5px;
background:#061b33;
color:#ffffff;
text-decoration:none;
font-size:12px;
font-weight:900;
white-space:nowrap;
}
.b2b-feature-pills{
display:none;
}
.b2b-live-map{
min-height:442px;
border-radius:10px;
box-shadow:0 16px 34px rgba(5,33,55,0.22);
}
.b2b-live-map > img{
object-position:center center;
opacity:.58;
filter:saturate(1.12) contrast(1.08);
}
.b2b-map-overlay{
background:linear-gradient(90deg, rgba(3,17,31,0.86), rgba(4,35,67,0.18) 54%, rgba(4,17,31,0.78)), linear-gradient(180deg, rgba(5,27,51,0.12), rgba(5,27,51,0.74));
}
.b2b-mobile-live-label{
position:absolute;
top:18px;
left:16px;
z-index:5;
display:flex;
align-items:center;
gap:7px;
color:#6ef479;
font-size:12px;
font-weight:900;
text-transform:uppercase;
}
.b2b-mobile-live-label i{
width:10px;
height:10px;
border-radius:50%;
background:#62e86f;
}
.b2b-mobile-status{
position:absolute;
top:18px;
right:14px;
z-index:5;
display:inline-flex;
align-items:center;
min-height:25px;
padding:0 12px;
border-radius:999px;
background:#248ff0;
color:#ffffff;
font-size:11px;
font-weight:900;
}
.b2b-route-dot{
left:16px !important;
right:auto !important;
width:168px;
min-width:0;
padding:9px 11px 9px 30px;
border-radius:8px;
transform:none !important;
background:rgba(5,25,48,0.78);
box-shadow:none;
}
.b2b-route-dot::before{
left:10px;
top:50%;
bottom:auto;
width:12px;
height:12px;
transform:translateY(-50%);
box-shadow:none;
}
.b2b-route-dot.origin{ top:68px; }
.b2b-route-dot.destination{ top:128px; }
.b2b-route-dot.current{ top:188px; }
.b2b-route-dot b{
font-size:9px;
}
.b2b-route-dot span{
font-size:11px;
}
.b2b-route-svg{
display:block;
inset:95px 18px auto 198px;
width:160px;
height:154px;
opacity:.82;
}
.b2b-ship-marker{
display:flex;
left:205px;
top:142px;
right:auto;
width:116px;
justify-content:center;
padding:7px 8px;
border-radius:999px;
background:rgba(6,27,51,0.76);
}
.b2b-ship-marker i{
font-size:17px;
}
.b2b-ship-marker span{
display:none;
}
.b2b-map-summary{
display:none;
}
.b2b-mobile-timeline{
position:absolute;
left:14px;
right:14px;
bottom:84px;
z-index:6;
display:grid;
grid-template-columns:repeat(6, minmax(58px, 1fr));
gap:0;
overflow-x:auto;
padding:0 2px 6px;
scrollbar-width:none;
}
.b2b-mobile-timeline::-webkit-scrollbar{
display:none;
}
.b2b-mobile-timeline span{
position:relative;
display:grid;
justify-items:center;
min-width:68px;
color:rgba(255,255,255,0.72);
text-align:center;
}
.b2b-mobile-timeline span::before{
content:"";
position:absolute;
top:15px;
left:-50%;
width:100%;
height:2px;
background:rgba(255,255,255,0.24);
}
.b2b-mobile-timeline span:first-child::before{
display:none;
}
.b2b-mobile-timeline i{
position:relative;
z-index:1;
display:grid;
place-items:center;
width:31px;
height:31px;
border-radius:50%;
background:rgba(255,255,255,0.18);
color:#8795a1;
font-size:11px;
}
.b2b-mobile-timeline .done i{
background:#62d96b;
color:#061b33;
}
.b2b-mobile-timeline .current i{
border:2px solid #ffffff;
background:#2389e6;
color:#ffffff;
animation:b2bLiveDot 1.8s ease-out infinite;
}
.b2b-mobile-timeline b{
margin-top:6px;
color:#ffffff;
font-size:10px;
line-height:1.1;
}
.b2b-mobile-timeline small{
margin-top:3px;
color:rgba(255,255,255,0.66);
font-size:9px;
}
.b2b-mobile-map-metrics{
position:absolute;
left:14px;
right:14px;
bottom:12px;
z-index:6;
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
overflow:hidden;
border:1px solid rgba(255,255,255,0.13);
border-radius:8px;
background:rgba(6,27,51,0.58);
}
.b2b-mobile-map-metrics span{
min-height:56px;
padding:10px 8px;
border-right:1px solid rgba(255,255,255,0.1);
}
.b2b-mobile-map-metrics span:last-child{
border-right:0;
}
.b2b-mobile-map-metrics small,
.b2b-mobile-map-metrics b{
display:block;
}
.b2b-mobile-map-metrics small{
color:rgba(255,255,255,0.64);
font-size:9px;
font-weight:900;
}
.b2b-mobile-map-metrics b{
margin-top:5px;
color:#ffffff;
font-size:10px;
line-height:1.2;
}
.b2b-board{
margin-top:10px;
}
.b2b-board-toolbar{
display:block;
margin-bottom:10px;
}
.b2b-board-toolbar .b2b-tabs{
display:flex;
flex-wrap:nowrap;
gap:8px;
overflow-x:auto;
padding:2px 2px 8px;
scrollbar-width:none;
}
.b2b-board-toolbar .b2b-tabs::-webkit-scrollbar{
display:none;
}
.b2b-board-toolbar .b2b-tabs button{
flex:0 0 auto;
height:39px;
padding:0 16px;
border-radius:7px;
font-size:11px;
box-shadow:0 6px 18px rgba(7,27,51,0.05);
}
.b2b-board-toolbar label{
display:none;
}
.shipment-row{
display:grid;
grid-template-columns:32% minmax(0, 1fr);
grid-template-areas:
"photo info"
"photo stock"
"tracking tracking";
min-height:188px;
margin-bottom:10px;
border-radius:9px;
box-shadow:0 9px 22px rgba(13,43,67,0.09);
}
.shipment-photo{
grid-area:photo;
min-height:188px;
border-radius:0;
}
.shipment-photo img{
object-position:center;
}
.shipment-photo > span,
.b2b-story-status{
top:0;
left:0;
right:0;
width:100%;
max-width:none;
padding:8px 7px;
border-radius:0;
font-size:8px;
line-height:1.15;
}
.shipment-photo > b,
.b2b-story-reference{
left:9px;
right:8px;
bottom:31px;
font-size:13px;
line-height:1.1;
}
.shipment-photo > small,
.b2b-story-route{
right:9px;
bottom:10px;
font-size:10px;
}
.shipment-info{
grid-area:info;
padding:11px 11px 7px;
border-right:0;
border-bottom:1px solid #edf1f4;
}
.shipment-info h2{
display:grid;
grid-template-columns:1fr;
gap:1px;
margin:0 0 8px;
color:#061b33;
font-size:14px;
line-height:1.12;
text-transform:uppercase;
}
.shipment-info h2 i{
display:none;
}
.shipment-info h2 span:last-child{
color:#587085;
font-size:11px;
text-transform:none;
}
.shipment-facts{
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:0;
border-top:1px solid #edf1f4;
}
.shipment-facts span{
min-height:42px;
padding:7px 6px 5px 0;
border-right:1px solid #edf1f4;
}
.shipment-facts span:nth-child(4n){
border-right:0;
}
.shipment-facts span:nth-child(n+7){
display:none;
}
.shipment-facts small{
font-size:7px;
line-height:1;
}
.shipment-facts b{
margin-top:4px;
font-size:9px;
line-height:1.15;
}
.b2b-tracking-alert,
.shipment-products{
display:none;
}
.shipment-stock{
grid-area:stock;
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
align-content:end;
padding:7px 11px 11px;
border:0;
background:#ffffff;
}
.shipment-stock span{
display:none;
}
.shipment-stock span:first-child,
.shipment-stock span:nth-child(4){
display:block;
min-height:auto;
padding:0;
border:0;
border-radius:0;
background:transparent;
font-size:8px;
}
.shipment-stock b{
margin-top:3px;
font-size:10px;
}
.shipment-stock a{
min-height:30px;
border:1px solid #061b33;
border-radius:5px;
background:#ffffff;
color:#061b33;
font-size:10px;
}
.shipment-stock a + a{
border-color:#061b33;
background:#061b33;
color:#ffffff;
}
.shipment-mini-tracking{
grid-area:tracking;
padding:10px 10px 12px;
border-top:1px solid #edf1f4;
border-right:0;
overflow:hidden;
}
.mini-track-rail{
grid-template-columns:repeat(9, 74px);
gap:4px;
overflow-x:auto;
padding:7px 2px 6px;
scrollbar-width:none;
}
.mini-track-rail::-webkit-scrollbar{ display:none; }
.mini-track-rail::before,
.mini-track-rail::after{
left:20px;
right:20px;
top:23px;
}
.mini-track-rail::after{
width:calc((666px - 40px) * var(--track-progress) / 100);
}
.mini-track-rail i{
width:32px;
height:32px;
font-size:12px;
}
.mini-track-rail b{
max-width:68px;
font-size:8px;
}
.mini-track-rail small{
font-size:7px;
}
.mini-current-status{
align-items:flex-start;
flex-direction:column;
gap:5px;
padding:8px 10px;
}
.mini-current-status span{
grid-template-columns:9px 1fr;
gap:5px 7px;
}
.mini-current-status small{
grid-column:2;
white-space:normal;
font-size:10px;
}
.mini-current-status time{
padding-left:16px;
font-size:9px;
}
.mini-vessel-progress{
grid-template-columns:1fr auto;
}
.mini-vessel-progress span{
grid-column:1 / -1;
grid-row:2;
}
.shipment-row[data-b2b-status="arrived"] .shipment-stock a + a{
border-color:#18894d;
background:#18894d;
}
.shipment-row[data-b2b-status="sold"] .shipment-stock a + a{
border-color:#dbe4eb;
background:#ffffff;
color:#061b33;
}
.b2b-bottom-grid,
.b2b-customer-panels{
display:none;
}
.b2b-reserve-panel{
display:grid;
grid-template-columns:1fr;
}
.b2b-mobile-bottom{
display:grid;
grid-template-columns:repeat(5, minmax(0, 1fr));
width:100vw;
max-width:100vw;
border-top:1px solid rgba(255,255,255,0.12);
background:#061b33;
}
.b2b-mobile-bottom a{
min-width:0;
padding:8px 2px 9px;
color:rgba(255,255,255,0.74);
font-size:9px;
line-height:1.1;
}
.b2b-mobile-bottom a.active{
color:#d6ad48;
}
.b2b-mobile-bottom i{
color:currentColor;
font-size:17px;
}
.b2b-mobile-bottom span{
overflow:hidden;
max-width:100%;
text-overflow:ellipsis;
white-space:nowrap;
}
}
@media (max-width:360px){
.b2b-sidebar{
padding-left:18px;
}
.b2b-dash-brand b{
font-size:21px;
}
.b2b-dash-brand img{
width:50px;
height:50px;
}
.b2b-topbar{
top:31px;
right:14px;
}
.b2b-top-actions{
gap:8px;
}
.b2b-top-actions button{
width:30px;
height:30px;
font-size:21px;
}
.b2b-how-it-works{
padding:0 9px;
font-size:10px;
}
.b2b-live-map{
min-height:430px;
}
.shipment-row{
grid-template-columns:34% minmax(0, 1fr);
}
.shipment-facts{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.shipment-facts span:nth-child(n+5){
display:none;
}
}
@media (min-width:621px) and (max-width:920px){
.b2b-sidebar{
padding:10px 14px;
}
.b2b-dash-brand img{
width:34px;
height:34px;
}
.b2b-dash-brand b{
font-size:18px;
}
.b2b-topbar{
top:55px;
gap:8px;
padding:10px 14px;
}
.b2b-search input{
height:40px;
padding-left:14px;
font-size:12px;
}
.b2b-search button{
top:4px;
right:4px;
}
.b2b-account b{
max-width:150px;
}
.b2b-dash-content{ padding:14px; }
.b2b-title-row{
margin-bottom:10px;
}
.b2b-title-row h1{ font-size:25px; }
.b2b-title-row p{
font-size:14px;
line-height:1.35;
}
.b2b-feature-pills span{
flex-basis:210px;
min-height:48px;
padding:8px 10px;
}
.b2b-feature-pills i{
width:30px;
height:30px;
}
.b2b-feature-pills b{
font-size:13px;
}
.b2b-feature-pills small{
font-size:10px;
}
.b2b-board-toolbar{ align-items:stretch; flex-direction:column; }
.b2b-board-toolbar .b2b-tabs{
flex-wrap:nowrap;
overflow-x:auto;
padding-bottom:4px;
scrollbar-width:none;
}
.b2b-board-toolbar .b2b-tabs::-webkit-scrollbar{ display:none; }
.b2b-board-toolbar .b2b-tabs button{ white-space:nowrap; }
.b2b-live-map{
min-height:286px;
border-radius:18px;
}
.b2b-route-dot.origin{ top:16px; }
.b2b-route-dot.current{ top:84px; }
.b2b-route-dot.destination{ top:152px; }
.b2b-route-dot{
padding:8px 10px;
}
.b2b-route-dot b{
font-size:10px;
}
.b2b-route-dot span{
font-size:10px;
}
.b2b-ship-marker{
display:none;
}
.b2b-map-summary{
left:16px;
right:16px;
bottom:12px;
padding:12px;
}
.b2b-map-summary h3{
margin-bottom:2px;
}
.b2b-map-summary strong{
margin-bottom:7px;
font-size:22px;
}
.b2b-map-summary ul{
grid-template-columns:1fr 1fr;
gap:8px 12px;
}
.b2b-map-summary li{
font-size:10px;
}
.shipment-row{
border-radius:18px;
}
.shipment-photo{
min-height:188px;
}
.shipment-photo > span,
.b2b-story-status{
top:10px;
right:10px;
left:10px;
width:max-content;
max-width:calc(100% - 20px);
border-radius:999px;
}
.shipment-photo > b,
.b2b-story-reference{
bottom:34px;
font-size:24px;
}
.shipment-photo > small,
.b2b-story-route{
bottom:13px;
font-size:12px;
}
.shipment-info,
.shipment-products,
.shipment-stock{
padding:16px;
}
.shipment-info h2{
gap:8px;
margin-bottom:14px;
font-size:22px;
line-height:1.15;
}
.shipment-info h2 i{
font-size:18px;
}
.shipment-facts{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;
}
.b2b-reserve-panel{ padding:20px; }
.shipment-facts span:nth-child(n+5){
display:none;
}
.shipment-facts small,
.shipment-stock span{
font-size:9px;
}
.shipment-facts b,
.shipment-stock b{
font-size:12px;
line-height:1.25;
}
.shipment-products h3{
margin-bottom:8px;
}
.shipment-products div{
grid-template-columns:46px minmax(0, 1fr) auto;
gap:10px;
padding:9px 0;
}
.shipment-products img{
width:46px;
height:38px;
}
.shipment-products b,
.shipment-products strong{
font-size:12px;
}
.shipment-products small{
font-size:10px;
}
.shipment-stock{
gap:8px;
}
.shipment-stock span{
min-height:48px;
padding:9px;
}
.shipment-stock a{
min-height:40px;
}
.b2b-top-actions{ flex-wrap:nowrap; }
.b2b-customer-panels{ grid-template-columns:1fr; }
.b2b-dashboard-page{ padding-bottom:66px; }
.b2b-mobile-bottom{
display:grid;
width:100vw;
max-width:100vw;
}
.b2b-bottom-grid,
.b2b-reserve-panel{
grid-template-columns:1fr;
}
.b2b-request-focus{
padding:14px;
border-radius:18px;
}
.b2b-request-grid{
grid-template-columns:1fr;
gap:12px;
}
.b2b-request-focus-head{
align-items:flex-start;
}
.b2b-request-focus-head b{
font-size:15px;
}
.b2b-allocation-options{
grid-template-columns:1fr;
}
.b2b-benefits-card,
.b2b-vip-benefits{
padding:20px;
border-radius:16px;
}
.b2b-reserve-panel h2{
font-size:25px;
}
.b2b-modal-card{
width:calc(100vw - 24px);
max-height:calc(100vh - 24px);
margin:12px auto;
border-radius:16px;
}
.b2b-modal-hero{
grid-template-columns:1fr;
}
.b2b-modal-hero img{
min-height:180px;
max-height:220px;
}
.b2b-modal-hero div{
padding:24px 22px;
}
.b2b-modal-hero h2{
font-size:28px;
}
.b2b-current-strip{
width:100%;
grid-template-columns:1fr;
}
.b2b-current-strip strong{
border-left:0;
border-top:1px solid rgba(144,188,220,0.22);
}
.b2b-detail-grid{
grid-template-columns:1fr;
}
.b2b-detail-track{
grid-template-columns:repeat(9, 84px);
overflow-x:auto;
padding:0 8px 4px;
scrollbar-width:none;
}
.b2b-detail-track::-webkit-scrollbar{ display:none; }
.b2b-detail-track::before,
.b2b-detail-track::after{
left:32px;
right:32px;
}
.b2b-detail-track::after{
width:calc((756px - 64px) * var(--track-progress) / 100);
}
.b2b-documents-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;
}
.b2b-document-card{
min-height:150px;
padding:12px 10px;
}
.b2b-detail-product{
grid-template-columns:1fr;
margin:14px;
padding:14px;
}
.b2b-detail-product-main{
grid-template-columns:64px minmax(0, 1fr);
}
.b2b-detail-product img{
width:64px;
height:50px;
}
.b2b-detail-quantity{
grid-template-columns:1fr;
}
.b2b-detail-quantity span{
border-left:0;
border-top:1px solid #d7e1e9;
padding:10px 0;
}
.b2b-modal-footer{
padding:0 14px 14px;
}
.b2b-modal-footer button{
width:100%;
}
}
.b2b-admin-page .b2b-title-row{
grid-template-columns:minmax(360px, .86fr) minmax(560px, 1fr);
}
.b2b-admin-customer-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:0 14px;
border-radius:7px;
background:#d6ad48;
color:#061b33;
font-size:12px;
font-weight:900;
text-decoration:none;
}
@media (max-width:620px){
.b2b-sidebar{
height:108px;
padding:20px 18px 10px;
}
.b2b-dash-brand{
max-width:230px;
}
.b2b-dash-brand img{
width:52px;
height:52px;
}
.b2b-dash-brand span{
max-width:168px;
overflow:hidden;
}
.b2b-dash-brand b{
overflow:hidden;
color:#061b33;
font-size:22px;
text-overflow:ellipsis;
white-space:nowrap;
}
.b2b-dash-brand small{
overflow:hidden;
color:#52697a;
text-overflow:ellipsis;
white-space:nowrap;
}
.b2b-topbar{
top:28px;
right:14px;
}
.b2b-top-actions{
gap:8px;
}
.b2b-top-actions button{
width:31px;
height:31px;
font-size:22px;
}
.b2b-dash-content{
padding-top:14px;
}
.b2b-title-row{
top:auto;
}
.b2b-title-row h1{
font-size:19px;
}
.b2b-title-row p{
font-size:13px;
}
.b2b-how-it-works{
min-height:34px;
padding:0 11px;
font-size:11px;
}
.shipment-row{
border-radius:9px;
}
.shipment-photo{
min-height:188px;
border-radius:0;
}
.shipment-photo > span,
.b2b-story-status{
top:0;
left:0;
right:0;
width:100%;
max-width:none;
border-radius:0;
}
.shipment-photo > b,
.b2b-story-reference{
bottom:31px;
font-size:13px;
}
.shipment-info{
padding:11px 11px 7px;
}
.shipment-info h2{
display:grid;
grid-template-columns:1fr;
gap:1px;
margin:0 0 8px;
font-size:15px;
line-height:1.12;
}
.shipment-info h2 span:last-child{
font-size:11px;
}
.shipment-facts{
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:0;
}
.shipment-facts small{
font-size:7px;
}
.shipment-facts b{
font-size:9px;
}
.shipment-stock{
padding:7px 11px 11px;
}
.shipment-stock b{
font-size:10px;
}
.shipment-stock a{
min-height:30px;
border-radius:5px;
font-size:10px;
}
}
.b2b-admin-status{
min-height:24px;
margin:0 0 14px;
color:#0a7f5a;
font-weight:900;
}
.b2b-admin-kpis{
display:grid;
grid-template-columns:repeat(6, minmax(0, 1fr));
gap:14px;
margin:0 0 20px;
padding:0;
}
.b2b-admin-kpis article{
min-height:106px;
padding:18px;
border:1px solid #dbe4eb;
border-radius:12px;
background:#ffffff;
box-shadow:0 12px 34px rgba(13,43,67,0.08);
}
.b2b-admin-kpis span{
display:block;
color:#607789;
font-size:11px;
font-weight:900;
text-transform:uppercase;
}
.b2b-admin-kpis b{
display:block;
margin-top:12px;
color:#061b33;
font-size:30px;
line-height:1;
}
.b2b-admin-panels{
display:grid;
grid-template-columns:360px minmax(0, 1fr) 320px;
gap:18px;
margin:0 0 24px;
padding:0;
}
.b2b-admin-form,
.b2b-admin-table,
.b2b-admin-blueprint{
border:1px solid #dbe4eb;
border-radius:14px;
background:#ffffff;
box-shadow:0 12px 34px rgba(13,43,67,0.08);
}
.b2b-admin-form,
.b2b-admin-table{ padding:20px; }
.b2b-admin-form h2,
.b2b-admin-table h2,
.b2b-admin-blueprint h2{
margin:0 0 16px;
color:#102438;
font-size:19px;
}
.b2b-admin-form{
display:grid;
gap:12px;
}
.b2b-admin-form label{
display:grid;
gap:6px;
color:#51677a;
font-size:12px;
font-weight:900;
}
.b2b-admin-form input,
.b2b-admin-form select,
.b2b-admin-form textarea{
width:100%;
min-height:40px;
border:1px solid #dbe4eb;
border-radius:8px;
padding:10px 12px;
color:#102438;
font:inherit;
font-size:13px;
}
.b2b-admin-form textarea{ min-height:92px; resize:vertical; }
.b2b-admin-form button,
.b2b-admin-table button{
min-height:38px;
border:0;
border-radius:7px;
background:#061b33;
color:#ffffff;
padding:0 12px;
font-weight:900;
}
.b2b-admin-table{
display:grid;
align-content:start;
gap:10px;
}
.b2b-admin-table article{
display:grid;
grid-template-columns:minmax(150px, 1fr) auto auto auto;
align-items:center;
gap:10px;
padding:12px;
border:1px solid #edf1f4;
border-radius:10px;
background:#f8fbfc;
}
.b2b-admin-table article span{
color:#465f72;
font-size:12px;
font-weight:800;
}
.b2b-admin-table b,
.b2b-admin-table small{
display:block;
}
.b2b-admin-table b{ color:#102438; font-size:13px; }
.b2b-admin-table small{ color:#6b8292; font-size:11px; }
.b2b-admin-blueprint{
margin-top:18px;
padding:22px;
}
.b2b-admin-blueprint p{
color:#51677a;
line-height:1.7;
}
.b2b-admin-blueprint div{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.b2b-admin-blueprint span{
padding:9px 12px;
border:1px solid #dbe4eb;
border-radius:999px;
background:#f8fbfc;
color:#102438;
font-size:12px;
font-weight:900;
}
@media (max-width:1240px){
.b2b-admin-page .b2b-title-row,
.b2b-admin-panels{ grid-template-columns:1fr; }
.b2b-admin-kpis{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:700px){
.b2b-admin-kpis{ grid-template-columns:1fr 1fr; }
.b2b-admin-table article{ grid-template-columns:1fr; }
}
@media (max-width:460px){
.b2b-admin-kpis{ grid-template-columns:1fr; }
}
@media (max-width:620px){
.b2b-modal-hero{
grid-template-columns:1fr;
}
.b2b-modal-hero img{
min-height:180px;
max-height:220px;
}
.b2b-current-strip{
width:100%;
grid-template-columns:1fr;
}
.b2b-current-strip strong{
border-left:0;
border-top:1px solid rgba(144,188,220,0.22);
}
.b2b-detail-grid{
grid-template-columns:1fr;
}
.b2b-detail-track{
grid-template-columns:repeat(9, 84px);
overflow-x:auto;
padding:0 8px 4px;
scrollbar-width:none;
}
.b2b-detail-track::-webkit-scrollbar{ display:none; }
.b2b-detail-track::before,
.b2b-detail-track::after{
left:32px;
right:32px;
}
.b2b-detail-track::after{
width:calc((756px - 64px) * var(--track-progress) / 100);
}
.b2b-documents-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;
}
.b2b-detail-product{
grid-template-columns:1fr;
}
.b2b-detail-quantity{
grid-template-columns:1fr;
}
.b2b-detail-quantity span{
border-left:0;
border-top:1px solid #d7e1e9;
padding:10px 0;
}
}
@media (max-width:620px){
body.b2b-dashboard-page .shipment-row .shipment-info h2{
display:grid;
grid-template-columns:1fr;
gap:1px;
margin:0 0 8px;
font-size:15px !important;
line-height:1.12;
}
body.b2b-dashboard-page .shipment-row .shipment-info h2 span:last-child{
font-size:11px !important;
}
body.b2b-dashboard-page .shipment-row .shipment-photo > b,
body.b2b-dashboard-page .shipment-row .b2b-story-reference{
font-size:13px !important;
}
body.b2b-dashboard-page .b2b-mobile-timeline b{
max-width:54px;
font-size:8px !important;
line-height:1.05;
white-space:normal;
}
body.b2b-dashboard-page .b2b-mobile-timeline small{
font-size:8px !important;
}
body.b2b-dashboard-page .b2b-mobile-timeline span{
min-width:74px;
}
}
@media (prefers-reduced-motion: reduce){
.mini-track-rail .is-current i,
.mini-track-rail .is-current b,
.mini-current-status i,
.mini-current-status b,
.b2b-mobile-timeline .current i{
animation:none !important;
}
}
/* B2B imports: HD real-map treatment */
body.b2b-dashboard-page .b2b-live-map{
height:clamp(430px, 54vh, 640px);
min-height:430px;
border:1px solid rgba(13,77,107,0.18);
border-radius:18px;
background:#eaf3f7;
box-shadow:0 20px 48px rgba(7,38,61,0.18);
}
body.b2b-dashboard-page .b2b-tracking-map{
background:#dcebf2;
}
body.b2b-dashboard-page .b2b-tracking-map .leaflet-tile{
filter:saturate(1.12) contrast(1.06) brightness(1.02);
}
body.b2b-dashboard-page .b2b-tracking-map::after{
content:"";
position:absolute;
inset:0;
z-index:430;
background:
linear-gradient(90deg, rgba(2,24,43,0.34), rgba(2,24,43,0.03) 42%, rgba(2,24,43,0.2)),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(3,18,33,0.16));
pointer-events:none;
}
body.b2b-dashboard-page .b2b-map-overlay,
body.b2b-dashboard-page .b2b-route-svg,
body.b2b-dashboard-page .b2b-route-dot,
body.b2b-dashboard-page .b2b-ship-marker{
display:none;
}
body.b2b-dashboard-page .b2b-tracking-map .leaflet-control-zoom{
margin:18px;
border:1px solid rgba(255,255,255,0.74);
border-radius:12px;
background:rgba(255,255,255,0.88);
box-shadow:0 14px 28px rgba(2,24,43,0.22);
}
body.b2b-dashboard-page .b2b-tracking-map .leaflet-control-zoom a{
width:34px;
height:34px;
border:0;
background:rgba(255,255,255,0.92);
color:#08314d;
line-height:34px;
}
body.b2b-dashboard-page .b2b-tracking-map .leaflet-control-attribution{
margin:0 10px 8px 0;
border-radius:999px;
background:rgba(255,255,255,0.78);
color:#31546a;
font-size:9px;
}
body.b2b-dashboard-page .b2b-tracking-map .leaflet-popup-content-wrapper,
body.b2b-dashboard-page .b2b-tracking-map .leaflet-popup-tip{
background:#ffffff;
color:#20384a;
box-shadow:0 18px 38px rgba(2,24,43,0.24);
}
body.b2b-dashboard-page .b2b-tracking-map .leaflet-popup-content{
color:#3e5668;
font-size:12px;
line-height:1.5;
}
body.b2b-dashboard-page .b2b-tracking-map .leaflet-popup-content strong{
color:#082c48;
}
body.b2b-dashboard-page .b2b-map-pin{
position:relative;
display:grid;
place-items:center;
width:48px;
height:48px;
border:3px solid rgba(255,255,255,0.95);
border-radius:50%;
background:#0bc9df;
color:#06283d;
box-shadow:0 0 0 10px rgba(11,201,223,0.2), 0 12px 30px rgba(2,24,43,0.34);
}
body.b2b-dashboard-page .b2b-map-pin i{
font-size:19px;
}
body.b2b-dashboard-page .b2b-map-pin img{
width:100%;
height:100%;
object-fit:cover;
}
body.b2b-dashboard-page .b2b-map-pin span{
top:50px;
display:grid;
grid-template-columns:auto 1fr;
gap:2px 6px;
min-width:132px;
padding:7px 10px;
border:1px solid rgba(255,255,255,0.28);
border-radius:9px;
background:rgba(4,25,43,0.9);
color:#ffffff;
box-shadow:0 10px 24px rgba(2,24,43,0.22);
}
body.b2b-dashboard-page .b2b-map-pin span em{
grid-row:1 / span 3;
align-self:center;
font-style:normal;
font-size:18px;
line-height:1;
}
body.b2b-dashboard-page .b2b-map-pin span b,
body.b2b-dashboard-page .b2b-map-pin span small,
body.b2b-dashboard-page .b2b-map-pin span strong{
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
body.b2b-dashboard-page .b2b-map-pin span b{
color:#ffffff;
font-size:10px;
line-height:1.1;
}
body.b2b-dashboard-page .b2b-map-pin span small{
color:rgba(255,255,255,0.72);
font-size:8.5px;
font-weight:800;
}
body.b2b-dashboard-page .b2b-map-pin span strong{
color:#9fefff;
font-size:8.5px;
}
body.b2b-dashboard-page .b2b-map-pin.container,
body.b2b-dashboard-page .b2b-map-pin.loading{
width:82px;
height:58px;
overflow:visible;
border-radius:12px;
background:#082f4d;
box-shadow:0 0 0 9px rgba(8,47,77,0.18), 0 16px 34px rgba(2,24,43,0.36);
}
body.b2b-dashboard-page .b2b-map-pin.container::after,
body.b2b-dashboard-page .b2b-map-pin.loading::after{
content:"";
position:absolute;
inset:0;
border-radius:9px;
background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.18));
pointer-events:none;
}
body.b2b-dashboard-page .b2b-map-pin.container span,
body.b2b-dashboard-page .b2b-map-pin.loading span{
top:64px;
left:50%;
}
body.b2b-dashboard-page .b2b-map-pin.loading{
border-color:#f6cf77;
}
body.b2b-dashboard-page .b2b-map-pin.ship{
background:#ffb340;
box-shadow:0 0 0 12px rgba(255,179,64,0.22), 0 14px 32px rgba(2,24,43,0.34);
}
body.b2b-dashboard-page .b2b-map-pin.destination{
background:#f1c65c;
}
body.b2b-dashboard-page .b2b-map-pin.transshipment{
background:#178de8;
}
body.b2b-dashboard-page .b2b-map-pin.truck{
background:#122f4a;
color:#ffffff;
box-shadow:0 0 0 11px rgba(18,47,74,0.22), 0 14px 32px rgba(2,24,43,0.34);
}
body.b2b-dashboard-page .b2b-map-summary{
top:18px;
right:18px;
bottom:auto;
width:214px;
min-height:0;
padding:18px;
border:1px solid rgba(255,255,255,0.2);
border-radius:16px;
background:rgba(4,25,43,0.82);
box-shadow:0 18px 36px rgba(2,24,43,0.24);
backdrop-filter:blur(10px);
}
body.b2b-dashboard-page .b2b-map-summary strong{
margin-bottom:14px;
}
body.b2b-dashboard-page .b2b-map-summary ul{
gap:10px;
}
@media (max-width:920px){
body.b2b-dashboard-page .b2b-live-map{
height:500px;
min-height:500px;
border-radius:16px;
}
body.b2b-dashboard-page .b2b-map-summary{
left:14px;
right:14px;
top:auto;
bottom:14px;
width:auto;
padding:14px;
}
body.b2b-dashboard-page .b2b-map-summary ul{
grid-template-columns:1fr 1fr;
gap:8px 12px;
}
body.b2b-dashboard-page .b2b-container-card{
grid-template-columns:180px minmax(0, 1fr);
}
body.b2b-dashboard-page .b2b-status-summary{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
body.b2b-dashboard-page .b2b-container-facts{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}
@media (max-width:620px){
body.b2b-dashboard-page .b2b-live-map{
height:520px;
min-height:520px;
margin-inline:-2px;
border-radius:14px;
}
body.b2b-dashboard-page .b2b-tracking-map .leaflet-control-zoom{
margin:12px;
}
body.b2b-dashboard-page .b2b-map-summary{
left:12px;
right:12px;
bottom:12px;
padding:13px;
}
body.b2b-dashboard-page .b2b-map-summary h3{
font-size:11px;
}
body.b2b-dashboard-page .b2b-map-summary strong{
margin-bottom:8px;
font-size:18px;
}
body.b2b-dashboard-page .b2b-map-summary li{
font-size:10px;
}
body.b2b-dashboard-page .b2b-map-pin span{
max-width:150px;
white-space:normal;
text-align:center;
}
body.b2b-dashboard-page .b2b-container-tracking{
margin-top:18px;
}
body.b2b-dashboard-page .b2b-section-head h2{
font-size:20px;
}
body.b2b-dashboard-page .b2b-section-head span{
width:auto;
max-width:100%;
}
body.b2b-dashboard-page .b2b-container-card{
grid-template-columns:1fr;
border-radius:14px;
}
body.b2b-dashboard-page .b2b-container-visual{
min-height:190px;
}
body.b2b-dashboard-page .b2b-container-main,
body.b2b-dashboard-page .b2b-container-side{
padding:14px;
}
body.b2b-dashboard-page .b2b-container-title{
display:grid;
gap:10px;
}
body.b2b-dashboard-page .b2b-container-title h3{
font-size:19px;
}
body.b2b-dashboard-page .b2b-container-title button{
width:100%;
justify-content:center;
}
body.b2b-dashboard-page .b2b-container-facts,
body.b2b-dashboard-page .b2b-vessel-dates,
body.b2b-dashboard-page .b2b-vessel-meta,
body.b2b-dashboard-page .b2b-status-summary{
grid-template-columns:1fr;
}
body.b2b-dashboard-page .b2b-vessel-route{
flex-wrap:wrap;
font-size:14px;
}
body.b2b-dashboard-page .b2b-container-facts span{
min-height:0;
}
}
/* Final cascade: premium B2B customer sidebar */
body.b2b-dashboard-page .b2b-app-shell{ grid-template-columns:292px minmax(0, 1fr); }
body.b2b-dashboard-page .b2b-sidebar{
position:sticky;
top:0;
height:100vh;
overflow-y:auto;
padding:26px 18px 18px;
border-right:1px solid rgba(210,166,70,0.34);
background:
linear-gradient(180deg, rgba(215,174,82,0.18), transparent 78px),
radial-gradient(circle at 18% 0, rgba(230,185,78,0.18), transparent 30%),
radial-gradient(circle at 80% 12%, rgba(28,101,158,0.22), transparent 34%),
linear-gradient(180deg, #061426 0%, #031427 52%, #03101e 100%);
box-shadow:inset -1px 0 0 rgba(255,214,125,0.18), 12px 0 38px rgba(2,10,22,0.18);
scrollbar-width:thin;
scrollbar-color:rgba(214,173,72,0.45) transparent;
}
body.b2b-dashboard-page .b2b-sidebar::-webkit-scrollbar{ width:6px; }
body.b2b-dashboard-page .b2b-sidebar::-webkit-scrollbar-thumb{ background:rgba(214,173,72,0.44); border-radius:999px; }
body.b2b-dashboard-page .b2b-dash-brand{
gap:12px;
margin-bottom:24px;
padding:4px 2px 20px;
border-bottom:1px solid rgba(214,173,72,0.2);
}
body.b2b-dashboard-page .b2b-dash-brand img{
width:52px;
height:52px;
padding:3px;
border:1px solid rgba(214,173,72,0.76);
background:rgba(255,255,255,0.04);
box-shadow:0 12px 30px rgba(0,0,0,0.24), 0 0 0 5px rgba(214,173,72,0.06);
}
body.b2b-dashboard-page .b2b-dash-brand b{
color:#f7d889;
font-size:22px;
letter-spacing:.02em;
text-transform:none;
}
body.b2b-dashboard-page .b2b-dash-brand small{
color:rgba(255,255,255,0.82);
font-size:9px;
font-weight:800;
letter-spacing:.09em;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-global-sidebar-nav{ gap:8px; margin:0; }
body.b2b-dashboard-page .b2b-global-sidebar-nav a,
body.b2b-dashboard-page .b2b-global-sidebar-nav .b2b-side-tool{
min-height:64px;
padding:10px 12px;
border:1px solid rgba(100,139,177,0.22);
border-radius:12px;
background:rgba(8,31,55,0.5);
color:#fff;
text-decoration:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.045);
transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
body.b2b-dashboard-page .b2b-global-sidebar-nav a:hover,
body.b2b-dashboard-page .b2b-global-sidebar-nav a:focus-visible{
transform:translateX(2px);
border-color:rgba(214,173,72,0.62);
background:rgba(15,45,76,0.76);
color:#fff;
box-shadow:0 10px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
body.b2b-dashboard-page .b2b-global-sidebar-nav a:focus-visible{
outline:2px solid rgba(247,216,137,0.8);
outline-offset:2px;
}
body.b2b-dashboard-page .b2b-global-sidebar-nav a:hover i{ color:#f4ca67; }
body.b2b-dashboard-page .b2b-side-primary,
body.b2b-dashboard-page .b2b-side-tool{
display:grid;
grid-template-columns:40px minmax(0, 1fr) auto;
gap:10px;
align-items:center;
}
body.b2b-dashboard-page .b2b-side-primary{ grid-template-columns:40px minmax(0, 1fr); }
body.b2b-dashboard-page .b2b-side-primary > i,
body.b2b-dashboard-page .b2b-side-tool > i{
width:40px;
height:40px;
display:grid;
place-items:center;
border:1px solid rgba(214,173,72,0.22);
border-radius:10px;
background:linear-gradient(145deg, rgba(255,255,255,0.08), rgba(5,26,48,0.92));
color:#f3c55f;
font-size:16px;
}
body.b2b-dashboard-page .b2b-side-primary b,
body.b2b-dashboard-page .b2b-side-tool b{
display:block;
color:#ffffff;
font-size:13px;
line-height:1.15;
letter-spacing:.01em;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-side-primary small,
body.b2b-dashboard-page .b2b-side-tool small{
display:block;
margin-top:4px;
color:rgba(224,235,246,0.72);
font-size:11px;
font-weight:650;
line-height:1.25;
}
body.b2b-dashboard-page .b2b-side-trade.active{
position:relative;
overflow:visible;
border-color:rgba(244,196,93,0.9);
background:linear-gradient(135deg, rgba(15,47,78,0.96), rgba(10,35,62,0.92));
color:#fff;
box-shadow:0 14px 32px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(244,196,93,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
}
body.b2b-dashboard-page .b2b-side-trade.active::before{
content:"";
position:absolute;
left:-1px;
top:12px;
bottom:12px;
width:3px;
border-radius:999px;
background:#f3c55f;
box-shadow:0 0 14px rgba(243,197,95,0.48);
}
body.b2b-dashboard-page .b2b-side-trade.active::after{
content:"";
position:absolute;
right:-9px;
top:50%;
width:16px;
height:16px;
transform:translateY(-50%) rotate(45deg);
border-top:1px solid rgba(244,196,93,0.76);
border-right:1px solid rgba(244,196,93,0.76);
border-radius:2px;
background:#0a2747;
}
body.b2b-dashboard-page .b2b-side-trade.active i{
border-color:rgba(244,196,93,0.72);
background:linear-gradient(145deg, rgba(244,196,93,0.28), rgba(8,31,55,0.96));
color:#f8d98b;
}
body.b2b-dashboard-page .b2b-side-trade.active b,
body.b2b-dashboard-page .b2b-side-trade.active small{ color:#fff; }
body.b2b-dashboard-page .b2b-side-section-title{
display:grid;
grid-template-columns:auto 1fr;
gap:10px;
align-items:center;
margin:16px 0 7px;
color:#e3b957;
text-transform:uppercase;
letter-spacing:.075em;
font-size:11px;
font-weight:900;
}
body.b2b-dashboard-page .b2b-side-section-title b{ white-space:nowrap; }
body.b2b-dashboard-page .b2b-side-section-title span{
height:1px;
background:linear-gradient(90deg, rgba(214,173,72,0.58), transparent);
}
body.b2b-dashboard-page .b2b-side-section-title span:last-child{ display:none; }
body.b2b-dashboard-page .b2b-side-tool > em{
min-width:16px;
margin:0;
padding:0;
background:transparent;
color:#f3c55f;
font-style:normal;
font-size:9px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-side-tool > em i{
width:auto;
color:rgba(243,197,95,0.92);
transition:transform .2s ease;
}
body.b2b-dashboard-page .b2b-side-tool:hover > em i{ transform:translateX(2px); }
body.b2b-dashboard-page .b2b-side-tool.is-disabled{
cursor:not-allowed;
opacity:.68;
border-style:dashed;
}
body.b2b-dashboard-page .b2b-side-tool.is-disabled b,
body.b2b-dashboard-page .b2b-side-tool.is-disabled small{ color:rgba(255,255,255,0.72); }
body.b2b-dashboard-page .b2b-side-vip-tool{
border-color:rgba(214,173,72,0.66) !important;
background:linear-gradient(135deg, rgba(18,45,72,0.82), rgba(7,28,51,0.86));
}
body.b2b-dashboard-page .b2b-side-vip-tool > i{ color:#f8d98b; }
body.b2b-dashboard-page .b2b-partner-card{ display:none !important; }
body.b2b-dashboard-page .b2b-help-card{
display:grid;
grid-template-columns:42px minmax(0, 1fr);
gap:12px;
align-items:center;
margin-top:20px;
padding:16px;
border:1px solid rgba(244,196,93,0.64);
border-radius:14px;
background:linear-gradient(145deg, rgba(18,46,75,0.86), rgba(5,24,45,0.94));
box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 30px rgba(0,0,0,0.18);
}
body.b2b-dashboard-page .b2b-help-card > span{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:10px;
background:rgba(243,197,95,0.12);
color:#f5c967;
font-size:18px;
}
body.b2b-dashboard-page .b2b-help-card strong{ display:block; color:#fff; font-size:13px; line-height:1.1; text-transform:uppercase; }
body.b2b-dashboard-page .b2b-help-card p{ margin:6px 0 12px; color:rgba(224,235,246,0.76); font-size:11px; line-height:1.35; }
body.b2b-dashboard-page .b2b-help-card a{
min-height:34px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
width:100%;
border:1px solid rgba(244,196,93,0.58);
border-radius:9px;
color:#f8d98b;
font-size:11px;
font-weight:900;
letter-spacing:.02em;
text-decoration:none;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-help-card a i{ color:#f8d98b; }
body.b2b-map-modal-open{ overflow:hidden; }
/* Compact verified shipment map preview */
body.b2b-dashboard-page .b2b-live-map{
isolation:isolate;
z-index:0;
height:clamp(255px, 30vh, 320px);
min-height:255px;
border:1px solid rgba(13,77,107,0.16);
border-radius:16px;
background:#eaf3f7;
box-shadow:0 14px 34px rgba(7,38,61,0.14);
}
body.b2b-dashboard-page .b2b-live-map.is-full-map{
position:fixed;
inset:18px;
z-index:160;
height:auto;
min-height:0;
border-radius:22px;
box-shadow:0 30px 90px rgba(2,10,22,0.52);
}
body.b2b-dashboard-page .b2b-live-map.is-full-map::before{
content:"";
position:fixed;
inset:0;
z-index:-1;
background:rgba(1,8,16,0.64);
backdrop-filter:blur(8px);
}
body.b2b-dashboard-page .b2b-map-preview-head{
position:absolute;
left:16px;
right:auto;
top:14px;
z-index:510;
width:auto;
min-height:0;
display:block;
padding:0;
border:0;
border-radius:0;
background:transparent;
color:#fff;
box-shadow:none;
backdrop-filter:none;
pointer-events:none;
}
body.b2b-dashboard-page .b2b-map-full-btn{
pointer-events:auto;
}
body.b2b-dashboard-page .b2b-map-preview-head > div,
body.b2b-dashboard-page .b2b-map-preview-head .b2b-map-preview-metrics{
display:none;
}
body.b2b-dashboard-page .b2b-map-preview-head span{
display:inline-flex;
align-items:center;
gap:7px;
color:#f3c55f;
font-size:10px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-map-preview-head strong{
display:block;
margin-top:2px;
color:#fff;
font-size:16px;
line-height:1.1;
}
body.b2b-dashboard-page .b2b-map-preview-metrics{
display:flex;
gap:8px;
}
body.b2b-dashboard-page .b2b-map-preview-metrics span{
min-width:72px;
display:block;
padding:7px 10px;
border:1px solid rgba(255,255,255,0.16);
border-radius:10px;
background:rgba(255,255,255,0.08);
}
body.b2b-dashboard-page .b2b-map-preview-metrics small,
body.b2b-dashboard-page .b2b-map-preview-metrics b{
display:block;
}
body.b2b-dashboard-page .b2b-map-preview-metrics small{
color:rgba(255,255,255,0.66);
font-size:9px;
font-weight:850;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-map-preview-metrics b{
margin-top:2px;
color:#fff;
font-size:15px;
}
body.b2b-dashboard-page .b2b-map-full-btn,
body.b2b-dashboard-page .b2b-map-full-close,
body.b2b-dashboard-page .b2b-map-lock-btn{
min-height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid rgba(243,197,95,0.66);
border-radius:10px;
background:linear-gradient(135deg, #f6cc67, #c9952d);
color:#061b33;
font-size:12px;
font-weight:950;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-tracking-map{
touch-action:none;
}
body.b2b-dashboard-page .b2b-live-map.is-map-locked .b2b-tracking-map{
pointer-events:none;
touch-action:pan-y;
}
body.b2b-dashboard-page .b2b-live-map.is-map-locked .leaflet-control-container{
display:none;
}
body.b2b-dashboard-page .b2b-map-lock-layer{
position:absolute;
inset:0;
z-index:505;
display:none;
align-items:center;
justify-content:center;
pointer-events:none;
}
body.b2b-dashboard-page .b2b-map-explore-btn{
display:inline-flex;
align-items:center;
gap:10px;
max-width:260px;
padding:10px 13px;
border:1px solid rgba(243,197,95,0.7);
border-radius:13px;
background:rgba(4,25,43,0.86);
color:#fff;
box-shadow:0 14px 34px rgba(2,24,43,0.28);
backdrop-filter:blur(10px);
pointer-events:auto;
}
body.b2b-dashboard-page .b2b-map-explore-btn > i{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:10px;
background:rgba(243,197,95,0.16);
color:#f6cc67;
}
body.b2b-dashboard-page .b2b-map-explore-btn b,
body.b2b-dashboard-page .b2b-map-explore-btn small{
display:block;
text-align:left;
}
body.b2b-dashboard-page .b2b-map-explore-btn b{
color:#fff;
font-size:13px;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-map-explore-btn small{
margin-top:2px;
color:rgba(255,255,255,0.72);
font-size:10px;
}
body.b2b-dashboard-page .b2b-map-lock-btn,
body.b2b-dashboard-page .b2b-map-full-close{
position:absolute;
z-index:520;
display:none;
}
body.b2b-dashboard-page .b2b-map-lock-btn{
right:16px;
bottom:16px;
}
body.b2b-dashboard-page .b2b-map-full-close{
right:18px;
top:18px;
}
body.b2b-dashboard-page .b2b-live-map.is-map-unlocked .b2b-map-lock-btn,
body.b2b-dashboard-page .b2b-live-map.is-full-map .b2b-map-full-close{
display:inline-flex;
}
body.b2b-dashboard-page .b2b-live-map.is-full-map .b2b-map-preview-head{
right:auto;
}
body.b2b-dashboard-page .b2b-live-map.is-full-map .b2b-tracking-map .leaflet-control-container{
display:block;
}
@media (hover:hover) and (pointer:fine) and (min-width:921px){
body.b2b-dashboard-page .b2b-live-map.is-map-unlocked .b2b-map-lock-btn,
body.b2b-dashboard-page .b2b-map-lock-layer{
display:none !important;
}
}
body.b2b-dashboard-page .b2b-map-summary{
top:auto;
right:16px;
bottom:16px;
width:188px;
padding:13px;
border-radius:14px;
}
body.b2b-dashboard-page .b2b-map-summary h3{ font-size:10px; }
body.b2b-dashboard-page .b2b-map-summary strong{ margin-bottom:8px; font-size:18px; }
body.b2b-dashboard-page .b2b-map-summary li{ gap:6px; font-size:10px; }
@media (hover:none), (pointer:coarse), (max-width:920px){
body.b2b-dashboard-page .b2b-live-map{
height:220px;
min-height:220px;
border-radius:14px;
}
body.b2b-dashboard-page .b2b-map-lock-layer{
display:flex;
}
body.b2b-dashboard-page .b2b-live-map.is-map-unlocked .b2b-map-lock-layer,
body.b2b-dashboard-page .b2b-live-map.is-full-map .b2b-map-lock-layer{
display:none;
}
body.b2b-dashboard-page .b2b-live-map.is-full-map{
inset:10px;
height:auto;
min-height:0;
border-radius:18px;
}
body.b2b-dashboard-page .b2b-live-map.is-full-map .b2b-tracking-map,
body.b2b-dashboard-page .b2b-live-map.is-map-unlocked .b2b-tracking-map{
pointer-events:auto;
touch-action:none;
}
body.b2b-dashboard-page .b2b-map-preview-head{
left:12px;
right:auto;
top:12px;
width:auto;
min-height:0;
display:block;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
backdrop-filter:none;
}
body.b2b-dashboard-page .b2b-map-preview-head > div,
body.b2b-dashboard-page .b2b-map-preview-head .b2b-map-preview-metrics{
display:none;
}
body.b2b-dashboard-page .b2b-map-preview-metrics{
display:none;
}
body.b2b-dashboard-page .b2b-map-preview-head strong{
font-size:14px;
}
body.b2b-dashboard-page .b2b-map-preview-head span{
font-size:9px;
}
body.b2b-dashboard-page .b2b-map-full-btn{
min-height:36px;
padding:0 13px;
border-radius:11px;
font-size:11px;
box-shadow:0 10px 24px rgba(2,24,43,.22);
}
body.b2b-dashboard-page .b2b-map-summary{
display:none;
}
body.b2b-dashboard-page .b2b-map-lock-btn{
right:12px;
bottom:12px;
}
body.b2b-dashboard-page .b2b-live-map.is-full-map .b2b-map-preview-head{
right:auto;
}
body.b2b-dashboard-page .b2b-map-full-close{
right:12px;
top:12px;
}
}
@media (max-width:420px){
body.b2b-dashboard-page .b2b-live-map{
height:198px;
min-height:198px;
}
body.b2b-dashboard-page .b2b-map-preview-head{
left:12px;
right:auto;
top:12px;
}
body.b2b-dashboard-page .b2b-map-full-btn{
justify-self:start;
}
body.b2b-dashboard-page .b2b-map-explore-btn{
transform:translateY(22px);
}
}
body.b2b-dashboard-page .b2b-account-menu{ position:relative; }
body.b2b-dashboard-page .b2b-account-menu summary{ list-style:none; cursor:pointer; }
body.b2b-dashboard-page .b2b-account-menu summary::-webkit-details-marker{ display:none; }
body.b2b-dashboard-page .b2b-account .fa-chevron-down{ margin-left:2px; color:rgba(255,255,255,0.7); font-size:11px; }
body.b2b-dashboard-page .b2b-account-dropdown{ position:absolute; right:0; top:calc(100% + 12px); z-index:95; width:230px; display:grid; gap:4px; padding:10px; border:1px solid rgba(7,27,51,0.1); border-radius:14px; background:#fff; box-shadow:0 20px 50px rgba(7,27,51,0.2); }
body.b2b-dashboard-page .b2b-account-dropdown a{ padding:10px 12px; border-radius:10px; color:#102438; text-decoration:none; font-size:12px; font-weight:850; }
body.b2b-dashboard-page .b2b-account-dropdown a:hover{ background:#eff7fa; color:#087a94; }
body.b2b-dashboard-page .b2b-mobile-drawer{ position:fixed; inset:0; z-index:90; display:none; background:rgba(1,10,20,0.62); }
body.b2b-dashboard-page .b2b-mobile-drawer.is-open{ display:block; }
body.b2b-dashboard-page .b2b-mobile-drawer-panel{
width:min(88vw, 360px);
height:100%;
overflow-y:auto;
padding:22px 18px;
border-right:1px solid rgba(214,173,72,0.36);
background:radial-gradient(circle at 50% 0, rgba(214,173,72,0.16), transparent 35%), linear-gradient(180deg, #061426, #031427 58%, #03101e);
color:#fff;
box-shadow:20px 0 50px rgba(0,0,0,0.32);
}
body.b2b-dashboard-page .b2b-mobile-drawer-close{ width:42px; height:42px; display:grid; place-items:center; margin-left:auto; border:1px solid rgba(214,173,72,0.32); border-radius:12px; background:rgba(255,255,255,0.06); color:#f8d98b; }
body.b2b-dashboard-page .b2b-mobile-drawer-panel > a,
body.b2b-dashboard-page .b2b-mobile-drawer-panel > span.is-disabled{
display:grid;
grid-template-columns:40px minmax(0, 1fr);
gap:11px;
align-items:center;
margin-top:9px;
padding:11px;
border:1px solid rgba(100,139,177,0.22);
border-radius:12px;
color:#fff;
text-decoration:none;
background:rgba(8,31,55,0.56);
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel > a.active{ border-color:rgba(244,196,93,0.9); background:linear-gradient(135deg, rgba(15,47,78,0.96), rgba(10,35,62,0.92)); color:#fff; box-shadow:inset 0 0 0 1px rgba(244,196,93,0.16); }
body.b2b-dashboard-page .b2b-mobile-drawer-panel > a.vip{ border-color:rgba(214,173,72,0.72); }
body.b2b-dashboard-page .b2b-mobile-drawer-panel > a > i,
body.b2b-dashboard-page .b2b-mobile-drawer-panel > span.is-disabled > i{
width:40px;
height:40px;
display:grid;
place-items:center;
border:1px solid rgba(214,173,72,0.22);
border-radius:10px;
background:linear-gradient(145deg, rgba(255,255,255,0.08), rgba(5,26,48,0.92));
color:#f3c55f;
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel > a.active > i{ border-color:rgba(244,196,93,0.72); color:#f8d98b; }
body.b2b-dashboard-page .b2b-mobile-drawer-panel b{ display:block; font-size:13px; text-transform:uppercase; }
body.b2b-dashboard-page .b2b-mobile-drawer-panel small{ display:block; margin-top:4px; color:rgba(224,235,246,0.72); font-size:11px; line-height:1.3; }
body.b2b-dashboard-page .b2b-mobile-drawer-panel > a.active small{ color:rgba(255,255,255,0.82); }
body.b2b-dashboard-page .b2b-mobile-drawer-panel > span.is-disabled{ opacity:.68; border-style:dashed; }
body.b2b-dashboard-page .b2b-mobile-drawer-panel p{ margin:16px 0 7px; color:#e3b957; text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:900; }
body.b2b-dashboard-page .b2b-mobile-partner-actions{ display:none; }
body.b2b-dashboard-page .b2b-mobile-help{ margin-top:18px; padding:16px; border:1px solid rgba(244,196,93,0.56); border-radius:14px; background:linear-gradient(145deg, rgba(18,46,75,0.86), rgba(5,24,45,0.94)); }
body.b2b-dashboard-page .b2b-mobile-help span{ display:block; margin:5px 0 12px; color:rgba(224,235,246,0.76); }
body.b2b-dashboard-page .b2b-mobile-help a{ color:#f8d98b; font-weight:900; text-decoration:none; text-transform:uppercase; font-size:12px; }
body.b2b-dashboard-page .b2b-mobile-help a{ color:#fff; font-weight:900; text-decoration:none; }
body.b2b-dashboard-page .b2b-mobile-help i{ color:#28d263; }
.b2b-full-note{ margin-top:10px; padding:9px 10px; border:1px solid rgba(214,161,54,.32); border-radius:10px; background:#fff8e4; color:#6f4c05; font-size:11px; font-weight:800; line-height:1.35; }
.b2b-commercial-product.is-full-container{ border-color:rgba(214,161,54,.48); background:linear-gradient(135deg,#fffdf8,#f7fbff); box-shadow:0 16px 36px rgba(7,27,51,.08); }
.b2b-commercial-product.is-full-container h4{ color:#06213f; }
.b2b-approved-booking{
margin:18px 22px 24px;
padding:22px;
border:1px solid #dce6ee;
border-radius:18px;
background:#ffffff;
box-shadow:0 18px 54px rgba(7,27,51,.08);
}
.b2b-approved-booking-head{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.42fr);
gap:22px;
align-items:start;
margin-bottom:20px;
}
.b2b-approved-booking-head small{
color:#8a6417;
font-size:12px;
letter-spacing:.08em;
}
.b2b-approved-booking-head h3{
color:#061b3a;
font-size:28px;
}
.b2b-lux-commercial .b2b-approved-booking-head h3{
font-size:30px;
}
.b2b-approved-booking-head p{
display:grid;
grid-template-columns:42px minmax(0,1fr);
align-items:center;
max-width:none;
min-height:62px;
margin:0;
padding:12px 16px;
border:1px solid #efdca6;
border-radius:13px;
background:linear-gradient(135deg,#fffefa,#fffaf0);
color:#061b3a;
font-size:14px;
line-height:1.45;
}
.b2b-approved-booking-head p i{
display:grid;
place-items:center;
width:32px;
height:32px;
border:2px solid #d09b1f;
border-radius:50%;
color:#c59015;
}
.b2b-approved-booking-head p strong{
color:#a6750b;
}
.b2b-approved-option-grid{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);
gap:18px;
margin-bottom:18px;
}
.b2b-approved-option{
display:grid;
grid-template-columns:72px minmax(0,1fr) auto 42px;
align-items:center;
gap:18px;
min-height:110px;
padding:18px 20px;
border:1px solid #eed89f;
border-radius:14px;
background:#ffffff;
color:#061b3a;
text-align:left;
cursor:pointer;
}
.b2b-approved-option.is-selected{
border:2px solid #09275a;
box-shadow:0 14px 36px rgba(6,27,51,.08);
}
.b2b-approved-option[data-is-disabled="1"]{
opacity:.82;
}
.b2b-option-icon{
display:grid;
place-items:center;
width:64px;
height:64px;
border-radius:50%;
background:linear-gradient(135deg,#24345d,#081f45);
color:#ffffff;
font-size:24px;
}
.b2b-approved-partial .b2b-option-icon{
background:linear-gradient(135deg,#e9c356,#c99416);
}
.b2b-option-copy{
min-width:0;
}
.b2b-option-copy b{
display:inline-block;
color:#061b3a;
font-size:22px;
font-weight:1000;
}
.b2b-option-copy em{
display:inline-flex;
margin-left:10px;
padding:4px 9px;
border-radius:999px;
background:#f3f6fb;
color:#09275a;
font-size:11px;
font-style:normal;
font-weight:1000;
text-transform:uppercase;
}
.b2b-approved-partial .b2b-option-copy em{
background:#fff3d4;
color:#a6750b;
}
.b2b-option-copy small{
display:block;
margin-top:8px;
color:#233a58;
font-size:14px;
font-weight:800;
}
.b2b-approved-option > strong{
color:#061b3a;
font-size:22px;
white-space:nowrap;
}
.b2b-option-check{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:50%;
background:#082b61;
color:#ffffff;
}
.b2b-option-check::before{
content:"\f00c";
font-family:"Font Awesome 6 Free";
font-weight:900;
color:#ffffff;
font-size:18px;
}
.b2b-option-chevron{
justify-self:end;
font-size:22px;
color:#071b33;
}
.b2b-approved-main-grid{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(320px,.9fr);
gap:18px;
}
.b2b-approved-main-grid .b2b-full-container-panel,
.b2b-approved-main-grid .b2b-partial-access-panel,
.b2b-approved-main-grid .b2b-partial-controls{
min-height:0;
padding:18px;
border-radius:14px;
box-shadow:none;
}
.b2b-approved-main-grid .b2b-full-container-panel{
display:block;
border-color:#dce6ee;
}
.b2b-approved-booking[data-purchase-mode="full"] [data-purchase-panel="partial-locked"]{
display:grid;
}
.b2b-approved-booking[data-purchase-mode="partial"][data-vip-access="0"] [data-purchase-panel="partial-locked"],
.b2b-approved-booking[data-purchase-mode="partial"][data-vip-access="1"] [data-purchase-panel="partial-vip"]{
display:grid;
}
.b2b-approved-card-title{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.b2b-approved-card-title small{
color:#8a6417;
font-size:12px;
font-weight:1000;
text-transform:uppercase;
}
.b2b-approved-card-title span{
display:inline-flex;
align-items:center;
gap:7px;
padding:8px 12px;
border:1px solid #ead79d;
border-radius:999px;
background:#fff8e4;
color:#805a0c;
font-size:12px;
font-weight:900;
}
.b2b-approved-main-grid h4{
margin:12px 0 8px;
color:#061b3a;
font-size:22px;
}
.b2b-approved-main-grid p{
margin:0 0 16px;
color:#1f3654;
font-size:14px;
font-weight:750;
}
.b2b-approved-stat-box{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
margin-bottom:16px;
padding:18px;
border:1px solid #e2ebf2;
border-radius:13px;
background:#ffffff;
}
.b2b-approved-stat-box span{
min-width:0;
padding:0 18px;
border-right:1px solid #e2ebf2;
}
.b2b-approved-stat-box span:first-child{ padding-left:0; }
.b2b-approved-stat-box span:last-child{ border-right:0; padding-right:0; }
.b2b-approved-stat-box small{
display:block;
color:#293f5b;
font-size:11px;
font-weight:1000;
text-transform:uppercase;
}
.b2b-approved-stat-box b{
display:block;
margin-top:8px;
color:#061b3a;
font-size:18px;
font-weight:1000;
}
.b2b-approved-stat-box span:nth-child(3) b{
color:#05694e;
}
.b2b-offer-strip{
display:grid;
grid-template-columns:48px minmax(0,1fr) 200px;
gap:16px;
align-items:center;
margin-bottom:16px;
padding:16px 18px;
border:1px solid #e3ebf2;
border-radius:13px;
background:linear-gradient(135deg,#ffffff,#fffdf8);
}
.b2b-offer-strip > span{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:50%;
color:#b7840f;
background:#fff4cf;
font-size:18px;
}
.b2b-offer-strip b{
display:block;
color:#061b3a;
font-size:15px;
}
.b2b-offer-strip small,
.b2b-offer-result small{
display:block;
margin-top:5px;
color:#243b59;
font-size:13px;
font-weight:750;
}
.b2b-offer-strip button{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:52px;
border:0;
border-radius:10px;
background:#061b3a;
color:#ffffff;
font-size:15px;
font-weight:1000;
cursor:pointer;
box-shadow:0 14px 30px rgba(6,27,51,.18), 0 0 0 1px rgba(214,161,54,.38);
}
.b2b-offer-result{
grid-column:1 / -1;
padding:12px 14px;
border:1px solid #d9e7ee;
border-radius:11px;
background:#f6fbfd;
}
.b2b-offer-result b{
font-size:18px;
}
.b2b-offer-result span{
display:block;
margin-top:4px;
color:#096451;
font-size:14px;
font-weight:1000;
}
.b2b-approved-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.b2b-approved-actions button{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:56px;
border-radius:10px;
font-size:16px;
}
.b2b-approved-actions button:not(.primary){
border-color:#d6a136;
}
.b2b-approved-main-grid .b2b-partial-access-panel{
grid-template-columns:1fr;
align-content:start;
border-color:#efdca6;
background:linear-gradient(135deg,#fffdf8,#ffffff);
}
.b2b-vip-benefit-grid{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:14px !important;
margin:24px 0 22px !important;
}
.b2b-vip-benefit-grid li{
display:grid;
grid-template-columns:42px minmax(0,1fr);
align-items:center;
gap:12px;
padding:0 !important;
border:0 !important;
background:transparent !important;
color:#061b3a !important;
font-size:14px !important;
line-height:1.35;
}
.b2b-vip-benefit-grid i{
display:grid;
place-items:center;
width:42px;
height:42px;
border:1px solid #edd9a0;
border-radius:50%;
background:#fff9ea;
color:#09275a;
}
.b2b-approved-main-grid .b2b-partial-access-panel .b2b-commercial-buttons{
display:grid;
gap:12px;
}
.b2b-approved-main-grid .b2b-partial-access-panel .b2b-commercial-buttons button{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:56px;
border-radius:10px;
font-size:16px;
}
.b2b-approved-main-grid .b2b-partial-access-panel .b2b-commercial-buttons .primary{
border-color:#d6a136;
background:linear-gradient(135deg,#e6bd4c,#c99215);
color:#ffffff;
}
.b2b-approved-trust-strip{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
margin-top:20px;
padding:16px 20px;
border:1px solid #e2ebf2;
border-radius:13px;
background:#ffffff;
}
.b2b-approved-trust-strip span{
display:grid;
grid-template-columns:44px minmax(0,1fr);
gap:14px;
align-items:center;
}
.b2b-approved-trust-strip i{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:50%;
background:#f3f7fa;
color:#061b3a;
font-size:18px;
}
.b2b-approved-trust-strip b,
.b2b-approved-trust-strip small{
grid-column:2;
display:block;
}
.b2b-approved-trust-strip b{
color:#203653;
font-size:14px;
}
.b2b-approved-trust-strip small{
margin-top:4px;
color:#607589;
font-size:12px;
}
.b2b-approved-login-line{
margin-top:16px;
padding-top:16px;
border-top:1px solid #edf2f5;
text-align:center;
color:#344961;
font-size:15px;
font-weight:750;
}
.b2b-approved-login-line button{
margin-left:12px;
border:0;
background:transparent;
color:#082b61;
font:inherit;
font-weight:1000;
cursor:pointer;
}
/* Compact booking section: same design, tighter professional proportions. */
.b2b-approved-booking{
margin:14px 18px 20px;
padding:18px;
border-radius:16px;
box-shadow:0 14px 40px rgba(7,27,51,.07);
}
.b2b-approved-booking-head{
grid-template-columns:minmax(0,1fr) minmax(260px,.4fr);
gap:16px;
margin-bottom:16px;
}
.b2b-approved-booking-head small{ font-size:11px; }
.b2b-approved-booking-head h3{ font-size:24px; }
.b2b-lux-commercial .b2b-approved-booking-head h3{ font-size:26px; }
.b2b-approved-booking-head p{
grid-template-columns:36px minmax(0,1fr);
min-height:54px;
padding:10px 13px;
border-radius:12px;
font-size:13px;
line-height:1.36;
}
.b2b-approved-booking-head p i{
width:28px;
height:28px;
font-size:13px;
}
.b2b-approved-option-grid{
gap:14px;
margin-bottom:14px;
}
.b2b-approved-option{
grid-template-columns:58px minmax(0,1fr) auto 34px;
gap:14px;
min-height:92px;
padding:14px 16px;
border-radius:12px;
}
.b2b-approved-option.is-selected{ box-shadow:0 10px 28px rgba(6,27,51,.07); }
.b2b-option-icon{
width:52px;
height:52px;
font-size:20px;
}
.b2b-option-copy b{ font-size:19px; }
.b2b-option-copy em{
margin-left:8px;
padding:3px 8px;
font-size:10px;
}
.b2b-option-copy small{
margin-top:6px;
font-size:13px;
}
.b2b-approved-option > strong{ font-size:19px; }
.b2b-option-check{
width:32px;
height:32px;
}
.b2b-option-check::before{ font-size:15px; }
.b2b-option-chevron{ font-size:18px; }
.b2b-approved-main-grid{ gap:14px; }
.b2b-approved-main-grid .b2b-full-container-panel,
.b2b-approved-main-grid .b2b-partial-access-panel,
.b2b-approved-main-grid .b2b-partial-controls{
padding:15px;
border-radius:12px;
}
.b2b-approved-card-title{ gap:10px; }
.b2b-approved-card-title small{ font-size:11px; }
.b2b-approved-card-title span{
gap:6px;
padding:6px 10px;
font-size:11px;
}
.b2b-approved-main-grid h4{
margin:10px 0 6px;
font-size:19px;
}
.b2b-approved-main-grid p{
margin:0 0 12px;
font-size:13px;
}
.b2b-approved-stat-box{
margin-bottom:12px;
padding:14px;
border-radius:12px;
}
.b2b-approved-stat-box span{ padding:0 12px; }
.b2b-approved-stat-box small{ font-size:10px; }
.b2b-approved-stat-box b{
margin-top:6px;
font-size:16px;
}
.b2b-offer-strip{
grid-template-columns:40px minmax(0,1fr) 170px;
gap:12px;
margin-bottom:12px;
padding:13px 15px;
border-radius:12px;
}
.b2b-offer-strip > span{
width:32px;
height:32px;
font-size:15px;
}
.b2b-offer-strip b{ font-size:14px; }
.b2b-offer-strip small,
.b2b-offer-result small{
margin-top:4px;
font-size:12px;
}
.b2b-offer-strip button{
gap:7px;
min-height:44px;
border-radius:9px;
font-size:13px;
}
.b2b-offer-result{
padding:10px 12px;
border-radius:10px;
}
.b2b-offer-result b{ font-size:16px; }
.b2b-offer-result span{ font-size:13px; }
.b2b-approved-actions{ gap:10px; }
.b2b-approved-actions button{
gap:8px;
min-height:48px;
border-radius:9px;
font-size:14px;
}
.b2b-vip-benefit-grid{
gap:10px !important;
margin:18px 0 16px !important;
}
.b2b-vip-benefit-grid li{
grid-template-columns:34px minmax(0,1fr);
gap:10px;
font-size:13px !important;
}
.b2b-vip-benefit-grid i{
width:34px;
height:34px;
}
.b2b-approved-main-grid .b2b-partial-access-panel .b2b-commercial-buttons{ gap:10px; }
.b2b-approved-main-grid .b2b-partial-access-panel .b2b-commercial-buttons button{
gap:8px;
min-height:48px;
border-radius:9px;
font-size:14px;
}
.b2b-approved-trust-strip{
gap:12px;
margin-top:16px;
padding:13px 16px;
border-radius:12px;
}
.b2b-approved-trust-strip span{
grid-template-columns:36px minmax(0,1fr);
gap:10px;
}
.b2b-approved-trust-strip i{
width:36px;
height:36px;
font-size:15px;
}
.b2b-approved-trust-strip b{ font-size:13px; }
.b2b-approved-trust-strip small{
margin-top:3px;
font-size:11px;
}
.b2b-approved-login-line{
margin-top:12px;
padding-top:12px;
font-size:13px;
}
.b2b-approved-login-line button{ margin-left:8px; }
.b2b-access-modal{ position:fixed; inset:0; z-index:9999; display:none; place-items:center; padding:18px; background:rgba(1,10,20,.58); }
.b2b-access-modal.is-open{ display:grid; }
.b2b-access-card{ position:relative; width:min(100%,460px); padding:22px; border-radius:18px; background:#fff; box-shadow:0 28px 80px rgba(1,10,20,.32); color:#071b33; }
.b2b-access-close{ position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; border-radius:50%; background:#eef5f8; color:#071b33; font-size:22px; cursor:pointer; }
.b2b-access-card > small{ color:#087a94; text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:900; }
.b2b-access-card h3{ margin:6px 0 8px; font-size:25px; line-height:1.1; }
.b2b-access-card p{ margin:0 0 16px; color:#5d7182; font-weight:700; line-height:1.45; }
.b2b-access-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.b2b-access-tabs button{ min-height:42px; border:1px solid #d9e6ed; border-radius:12px; background:#f7fafc; color:#071b33; font-weight:900; cursor:pointer; }
.b2b-access-tabs button.active{ border-color:#d6a136; background:linear-gradient(135deg,#f7cc55,#d6a136); }
.b2b-access-summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0; }
.b2b-access-summary div{ min-width:0; padding:10px; border:1px solid #dceaf0; border-radius:14px; background:linear-gradient(180deg,#f8fcfd,#eef8fa); }
.b2b-access-summary b,.b2b-access-summary span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.b2b-access-summary b{ color:#071b33; font-size:12px; font-weight:950; }
.b2b-access-summary span{ color:#607588; font-size:11px; font-weight:800; margin-top:4px; }
.b2b-access-feedback{
margin:-2px 0 12px;
padding:10px 12px;
border:1px solid #d9e6ed;
border-radius:12px;
background:#f7fafc;
color:#315069;
font-size:12px;
font-weight:850;
line-height:1.35;
}
.b2b-access-feedback[data-state="success"]{
border-color:#bfe8cd;
background:#ecfbf1;
color:#16783c;
}
.b2b-access-feedback[data-state="error"]{
border-color:#f0c6c0;
background:#fff1ef;
color:#a3352b;
}
.b2b-access-feedback[data-state="loading"]{
border-color:#ead6a9;
background:#fff8e8;
color:#805817;
}
.b2b-access-card form{ display:grid; gap:10px; }
.b2b-access-card label{ display:grid; gap:6px; color:#315069; font-size:12px; font-weight:900; }
.b2b-access-card input,.b2b-access-card select,.b2b-access-card textarea{ width:100%; min-height:44px; border:1px solid #d8e5ed; border-radius:12px; padding:0 12px; font:inherit; color:#071b33; background:#fff; }
.b2b-access-card textarea{ min-height:76px; padding:10px 12px; resize:vertical; }
.b2b-access-card button.primary{ min-height:46px; border:0; border-radius:13px; background:#071b33; color:#fff; font-weight:950; cursor:pointer; }
.b2b-access-card button:disabled{ opacity:.6; cursor:wait; }
.b2b-access-actions,.b2b-success-actions{ display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; }
.b2b-access-actions button:not(.primary),.b2b-success-actions button:not(.primary){ min-height:42px; border:1px solid #d8e5ed; border-radius:12px; background:#f7fafc; color:#071b33; font-weight:900; cursor:pointer; }
.b2b-review-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.b2b-review-grid span{ display:grid; gap:4px; padding:10px; border-radius:12px; background:#f7fbfc; border:1px solid #dceaf0; color:#607588; font-weight:800; font-size:12px; }
.b2b-review-grid b{ color:#071b33; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.b2b-access-consent{ grid-template-columns:auto 1fr !important; align-items:start; gap:8px !important; line-height:1.4; }
.b2b-access-consent input{ width:18px; min-height:18px; margin-top:2px; }
@media (max-width:560px){
.b2b-access-card{ padding:18px; border-radius:16px; }
.b2b-access-summary,.b2b-review-grid{ grid-template-columns:1fr; }
.b2b-access-actions,.b2b-success-actions{ grid-template-columns:1fr; }
}
.document-access-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.document-access-head p{ margin:4px 0 0; color:var(--muted); font-size:12px; font-weight:700; }
.document-access-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.document-state-row{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:10px; }
.document-state-row select{ min-height:36px; border:1px solid #d8e5ed; border-radius:10px; padding:0 10px; background:#fff; color:#071b33; font-weight:800; text-transform:capitalize; }
@media (max-width:1040px){
body.b2b-dashboard-page .b2b-app-shell{ grid-template-columns:230px minmax(0, 1fr); }
body.b2b-dashboard-page .b2b-dash-brand b{ font-size:22px; }
body.b2b-dashboard-page .b2b-dash-brand small,
body.b2b-dashboard-page .b2b-side-primary small,
body.b2b-dashboard-page .b2b-side-tool small{ font-size:10px; }
body.b2b-dashboard-page .b2b-side-primary b,
body.b2b-dashboard-page .b2b-side-tool b{ font-size:13px; }
body.b2b-dashboard-page .b2b-partner-card{ grid-template-columns:1fr; }
}
@media (max-width:920px){
body.b2b-dashboard-page .b2b-app-shell{ display:block; }
body.b2b-dashboard-page .b2b-sidebar{ height:auto; padding:12px 16px; overflow:visible; background:#fff; color:#061b33; }
body.b2b-dashboard-page .b2b-dash-brand{ margin-bottom:0; }
body.b2b-dashboard-page .b2b-dash-brand img{ width:42px; height:42px; }
body.b2b-dashboard-page .b2b-dash-brand b{ color:#061b33; font-size:21px; }
body.b2b-dashboard-page .b2b-dash-brand small{ color:#52697a; font-size:9px; }
body.b2b-dashboard-page .b2b-global-sidebar-nav,
body.b2b-dashboard-page .b2b-partner-card,
body.b2b-dashboard-page .b2b-help-card{ display:none; }
body.b2b-dashboard-page .b2b-topbar{ top:65px; }
.b2b-commercial-product{ grid-template-columns:110px minmax(0,1fr); }
.b2b-commercial-action{ grid-column:1 / -1; grid-template-columns:minmax(150px,.45fr) minmax(0,1fr); align-items:end; }
.b2b-quick-qty,
.b2b-price-note,
.b2b-commercial-buttons{ grid-column:1 / -1; }
.b2b-approved-booking-head,
.b2b-approved-option-grid,
.b2b-approved-main-grid,
.b2b-approved-trust-strip{
grid-template-columns:1fr;
}
.b2b-offer-strip{
grid-template-columns:42px minmax(0,1fr);
}
.b2b-offer-strip button{
grid-column:1 / -1;
}
.b2b-approved-stat-box{
grid-template-columns:1fr 1fr;
gap:14px 0;
}
.b2b-approved-stat-box span:nth-child(2){
border-right:0;
}
}
@media (max-width:620px){
body.b2b-dashboard-page .b2b-sidebar{ height:118px; padding:22px 24px 12px; }
body.b2b-dashboard-page .b2b-dash-brand img{ width:58px; height:58px; }
body.b2b-dashboard-page .b2b-dash-brand b{ font-size:25px; }
body.b2b-dashboard-page .b2b-topbar{ top:34px; }
body.b2b-dashboard-page .b2b-account-menu{ display:none; }
.b2b-commercial-products{ margin:12px 10px 18px; padding:12px; border-radius:12px; }
.b2b-approved-booking{
margin:12px 10px 18px;
padding:14px;
border-radius:16px;
}
.b2b-commercial-head{ display:block; }
.b2b-approved-booking-head{
display:grid;
gap:14px;
}
.b2b-commercial-head h3{ font-size:19px; }
.b2b-approved-booking-head h3{
font-size:26px;
}
.b2b-commercial-head p{ margin-top:7px; font-size:12px; }
.b2b-approved-booking-head p{
grid-template-columns:36px minmax(0,1fr);
padding:11px;
font-size:13px;
}
.b2b-approved-option{
grid-template-columns:56px minmax(0,1fr) auto;
gap:12px;
min-height:94px;
padding:14px;
}
.b2b-option-icon{
width:54px;
height:54px;
}
.b2b-option-copy b{
font-size:18px;
}
.b2b-option-copy small{
font-size:12px;
}
.b2b-approved-option > strong{
grid-column:2 / -1;
font-size:18px;
}
.b2b-option-check,
.b2b-option-chevron{
grid-column:3;
grid-row:1;
}
.b2b-commercial-product{ grid-template-columns:1fr; gap:12px; }
.b2b-commercial-product > img{ width:100%; height:156px; }
.b2b-commercial-action{ grid-template-columns:1fr; }
.b2b-availability-line{ grid-template-columns:1fr; }
.b2b-purchase-dropdown summary{
grid-template-columns:1fr auto;
gap:8px;
padding:13px;
}
.b2b-purchase-dropdown summary strong,
.b2b-purchase-dropdown summary small{
grid-column:1 / -1;
}
.b2b-purchase-menu{
position:static;
}
.b2b-full-container-panel,
.b2b-partial-access-panel,
.b2b-partial-grid{
grid-template-columns:1fr;
}
.b2b-approved-main-grid .b2b-full-container-panel,
.b2b-approved-main-grid .b2b-partial-access-panel,
.b2b-approved-main-grid .b2b-partial-controls{
padding:14px;
}
.b2b-approved-card-title{
display:grid;
gap:8px;
}
.b2b-approved-stat-box{
grid-template-columns:1fr;
padding:14px;
}
.b2b-approved-stat-box span{
padding:10px 0;
border-right:0;
border-bottom:1px solid #e2ebf2;
}
.b2b-approved-stat-box span:last-child{
border-bottom:0;
}
.b2b-approved-actions{
grid-template-columns:1fr;
}
.b2b-vip-benefit-grid{
grid-template-columns:1fr;
}
.b2b-approved-trust-strip{
padding:14px;
}
.b2b-partial-access-panel .b2b-commercial-buttons{
justify-content:stretch;
}
.b2b-container-composition{
display:grid;
}
.b2b-confidence-strip{ padding:12px 10px 0; gap:7px; }
.b2b-confidence-strip span{ min-height:30px; padding:0 10px; font-size:11px; }
}
@media (max-width:780px){
.shipment-mini-tracking{
overflow-x:auto;
scrollbar-width:none;
}
.shipment-mini-tracking::-webkit-scrollbar{
display:none;
}
.mini-track-rail{
min-width:760px;
}
}
@media (max-width:1180px){
.b2b-lux-hero{
grid-template-columns:320px minmax(0,1fr);
}
.b2b-lux-update-card{
grid-column:1 / -1;
grid-template-columns:repeat(4,minmax(0,1fr));
}
.b2b-lux-update-card > small,
.b2b-lux-update-card > b{
grid-column:1 / -1;
}
.b2b-lux-grid{
grid-template-columns:1fr 1fr;
}
.b2b-lux-summary-card{
grid-column:1 / -1;
}
.b2b-lux-commercial .b2b-commercial-list{
grid-template-columns:1fr;
}
}
@media (max-width:780px){
.b2b-lux-detail{
width:100vw;
max-height:100vh;
margin:0;
border-radius:0;
}
.b2b-lux-topbar{
align-items:flex-start;
flex-direction:column;
padding:14px 16px;
}
.b2b-lux-topbar nav{
width:100%;
margin-right:0;
}
.b2b-lux-topbar button{
flex:1;
min-width:0;
}
.b2b-lux-hero{
grid-template-columns:1fr;
gap:14px;
padding:14px;
}
.b2b-lux-hero figure{
min-height:190px;
}
.b2b-lux-titleline{
align-items:flex-start;
flex-direction:column;
gap:8px;
}
.b2b-lux-titleline h2{
font-size:32px;
}
.b2b-lux-hero-main > p{
font-size:17px;
}
.b2b-lux-detail .b2b-current-strip{
display:grid;
grid-template-columns:1fr;
}
.b2b-lux-detail .b2b-current-strip strong{
border-left:0;
}
.b2b-lux-facts{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.b2b-lux-facts span{
min-height:64px;
border-bottom:1px solid #e2eaf1;
}
.b2b-lux-update-card{
grid-template-columns:1fr;
}
.b2b-lux-detail .b2b-detail-progress{
margin:0 14px 14px;
overflow-x:auto;
}
.b2b-lux-detail .b2b-detail-track{
min-width:920px;
}
.b2b-lux-grid{
grid-template-columns:1fr;
padding:0 14px 14px;
}
.b2b-lux-panel{
min-height:0;
}
.b2b-lux-products{
grid-template-columns:1fr;
}
.b2b-lux-docs{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.b2b-lux-photo-gallery{
grid-template-columns:1fr;
}
.b2b-lux-photo-gallery figure img{
height:190px;
}
.b2b-lux-commercial{
padding:0 14px 14px;
}
.b2b-lux-commercial .b2b-commercial-product{
grid-template-columns:1fr;
}
.b2b-lux-commercial .b2b-commercial-product > img{
width:100%;
height:130px;
}
.b2b-lux-login-note{
display:grid;
gap:9px;
}
.b2b-lux-technical,
.b2b-lux-activity{
margin:0 14px 14px;
}
.b2b-lux-trust-strip{
grid-template-columns:1fr;
gap:12px;
padding:18px 14px 88px;
}
.b2b-lux-trust-strip span{
padding:0;
border-right:0;
}
}
@media (min-width:1121px){
body.b2b-dashboard-page .shipment-row{
grid-template-columns:minmax(240px, 304px) minmax(0, 1fr) minmax(280px, .92fr) 154px;
min-height:262px;
}
body.b2b-dashboard-page .shipment-photo{
min-height:262px;
}
body.b2b-dashboard-page .mini-track-rail{
grid-template-columns:repeat(10, minmax(56px, 1fr));
}
}
@media (max-width:1120px){
body.b2b-dashboard-page .shipment-row{
grid-template-columns:260px minmax(0,1fr) 150px;
grid-template-areas:
"photo info stock"
"photo products stock"
"tracking tracking tracking";
}
body.b2b-dashboard-page .shipment-products{
border-top:1px solid #edf1f4;
}
body.b2b-dashboard-page .shipment-facts{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px 0;
}
}
@media (max-width:760px){
body.b2b-dashboard-page .shipment-row{
display:grid;
grid-template-columns:1fr;
grid-template-areas:
"photo"
"info"
"products"
"stock"
"tracking";
min-height:0;
border-radius:18px;
}
body.b2b-dashboard-page .shipment-photo{
min-height:238px;
}
body.b2b-dashboard-page .shipment-route-title{
margin-bottom:16px;
font-size:16px;
}
body.b2b-dashboard-page .shipment-facts{
grid-template-columns:repeat(2,minmax(0,1fr));
}
body.b2b-dashboard-page .shipment-facts span{
min-height:52px;
padding:0 10px;
}
body.b2b-dashboard-page .shipment-facts span:nth-child(odd){
padding-left:0;
}
body.b2b-dashboard-page .shipment-product-card{
grid-template-columns:70px minmax(0,1fr);
}
body.b2b-dashboard-page .shipment-product-card strong,
body.b2b-dashboard-page .shipment-product-card em{
grid-column:2;
text-align:left;
}
body.b2b-dashboard-page .shipment-stock{
grid-template-columns:1fr 1fr;
align-items:center;
text-align:center;
}
body.b2b-dashboard-page .shipment-stock a,
body.b2b-dashboard-page .shipment-stock span,
body.b2b-dashboard-page .shipment-stock time{
min-height:34px;
}
body.b2b-dashboard-page .shipment-stock time{
grid-column:1 / -1;
}
body.b2b-dashboard-page .shipment-mini-tracking{
overflow-x:auto;
}
body.b2b-dashboard-page .mini-track-rail{
min-width:760px;
grid-template-columns:repeat(10, 74px);
}
body.b2b-dashboard-page .shipment-row .b2b-story-slide figcaption{
display:none;
}
body.b2b-dashboard-page .shipment-row .b2b-story-progress-label{
top:45px;
right:12px;
max-width:142px;
font-size:9px;
}
body.b2b-dashboard-page .shipment-row .b2b-story-reference{
bottom:126px;
font-size:18px !important;
}
body.b2b-dashboard-page .shipment-row .b2b-story-route{
right:18px;
bottom:61px;
font-size:11px;
line-height:1.24;
}
body.b2b-dashboard-page .shipment-row .b2b-story-controls{
display:none;
}
body.b2b-dashboard-page .shipment-row .b2b-story-dots{
right:auto;
left:18px;
bottom:38px;
}
}
@media (max-width:620px){
body.b2b-dashboard-page .b2b-lux-commercial{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
body.b2b-dashboard-page .b2b-approved-booking{
width:900px;
min-width:900px;
max-width:none;
margin:10px 8px 16px;
padding:14px;
border-radius:14px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking{
margin-left:0;
margin-right:0;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking,
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking *{
-webkit-text-size-adjust:100%;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-commercial-products-wrap,
body.b2b-dashboard-page .b2b-detail-panel .b2b-lux-commercial,
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
body.b2b-dashboard-page .b2b-approved-booking-head{
grid-template-columns:minmax(0,1fr) minmax(235px,.38fr);
gap:10px;
margin-bottom:12px;
}
body.b2b-dashboard-page .b2b-approved-booking-head h3{
font-size:22px;
}
body.b2b-dashboard-page .b2b-approved-booking-head p{
grid-template-columns:32px minmax(0,1fr);
min-height:0;
padding:9px 10px;
font-size:12px;
}
body.b2b-dashboard-page .b2b-approved-option-grid{
grid-template-columns:minmax(0,1.25fr) minmax(235px,1fr);
gap:10px;
margin-bottom:10px;
}
body.b2b-dashboard-page .b2b-approved-option{
grid-template-columns:58px minmax(0,1fr) auto 34px;
min-height:82px;
gap:12px;
padding:12px 14px;
}
body.b2b-dashboard-page .b2b-option-icon{
width:50px;
height:50px;
font-size:19px;
}
body.b2b-dashboard-page .b2b-option-copy b{
font-size:18px;
}
body.b2b-dashboard-page .b2b-option-copy small{
font-size:12px;
}
body.b2b-dashboard-page .b2b-approved-option > strong{
font-size:18px;
grid-column:auto;
}
body.b2b-dashboard-page .b2b-option-check{
width:30px;
height:30px;
grid-column:auto;
grid-row:auto;
}
body.b2b-dashboard-page .b2b-option-chevron{
grid-column:auto;
grid-row:auto;
}
body.b2b-dashboard-page .b2b-approved-main-grid .b2b-full-container-panel,
body.b2b-dashboard-page .b2b-approved-main-grid .b2b-partial-access-panel,
body.b2b-dashboard-page .b2b-approved-main-grid .b2b-partial-controls{
padding:12px;
}
body.b2b-dashboard-page .b2b-approved-main-grid{
grid-template-columns:minmax(0,1.15fr) minmax(285px,.9fr);
}
body.b2b-dashboard-page .b2b-approved-main-grid h4{
font-size:17px;
}
body.b2b-dashboard-page .b2b-approved-stat-box{
grid-template-columns:repeat(4,minmax(0,1fr));
padding:10px 12px;
}
body.b2b-dashboard-page .b2b-approved-stat-box span{
padding:0 10px;
border-right:1px solid #e2ebf2;
border-bottom:0;
}
body.b2b-dashboard-page .b2b-approved-stat-box span:last-child{
border-right:0;
}
body.b2b-dashboard-page .b2b-offer-strip{
grid-template-columns:40px minmax(0,1fr) 170px;
padding:11px 12px;
}
body.b2b-dashboard-page .b2b-offer-strip button{
grid-column:auto;
}
body.b2b-dashboard-page .b2b-approved-actions button,
body.b2b-dashboard-page .b2b-approved-main-grid .b2b-partial-access-panel .b2b-commercial-buttons button{
min-height:44px;
font-size:13px;
}
body.b2b-dashboard-page .b2b-approved-trust-strip{
grid-template-columns:repeat(3,minmax(0,1fr));
padding:11px 12px;
}
}
@media (max-width:780px){
body.b2b-dashboard-page .b2b-story-status{
top:12px;
left:12px;
padding:8px 11px;
border-radius:10px;
font-size:9px;
}
body.b2b-dashboard-page .b2b-story-status::before{
width:17px;
height:17px;
font-size:9px;
}
body.b2b-dashboard-page .b2b-story-progress-label{
top:54px;
left:14px;
right:auto;
max-width:180px;
padding:0;
background:transparent;
font-size:9px;
}
body.b2b-dashboard-page .b2b-story-slide figcaption,
body.b2b-dashboard-page .b2b-story-detail .b2b-story-slide figcaption{
display:grid;
left:14px;
top:92px;
width:min(270px, calc(100% - 28px));
grid-template-columns:40px minmax(0,1fr);
gap:10px;
padding:12px;
border-radius:13px;
}
body.b2b-dashboard-page .b2b-story-slide figcaption > i{
width:40px;
height:40px;
font-size:17px;
}
body.b2b-dashboard-page .b2b-story-slide figcaption strong{
font-size:13px;
}
body.b2b-dashboard-page .b2b-story-slide figcaption small{
font-size:10px;
line-height:1.28;
}
body.b2b-dashboard-page .b2b-story-slide figcaption em{
margin-top:5px;
font-size:8.5px;
}
body.b2b-dashboard-page .b2b-story-bottom-info{
left:14px;
bottom:16px;
grid-template-columns:34px minmax(0,1fr);
min-width:0;
width:min(220px, calc(100% - 118px));
max-width:none;
gap:9px;
padding:11px 12px;
border-radius:13px;
}
body.b2b-dashboard-page .b2b-story-bottom-info > i{
width:34px;
height:34px;
font-size:14px;
}
body.b2b-dashboard-page .b2b-story-bottom-info small{
font-size:8.5px;
}
body.b2b-dashboard-page .b2b-story-bottom-info strong{
font-size:12px;
}
body.b2b-dashboard-page .b2b-story-bottom-info em{
font-size:9px;
}
body.b2b-dashboard-page .b2b-story-controls{
right:12px;
bottom:52px;
display:flex;
gap:8px;
}
body.b2b-dashboard-page .b2b-story-controls button{
width:34px;
height:34px;
font-size:14px;
}
body.b2b-dashboard-page .b2b-story-pagination{
right:13px;
bottom:18px;
gap:8px;
}
body.b2b-dashboard-page .b2b-story-pagination > span{
font-size:10px;
}
body.b2b-dashboard-page .b2b-story-dots{
position:static;
right:auto;
left:auto;
bottom:auto;
gap:5px;
}
body.b2b-dashboard-page .b2b-story-dots button,
body.b2b-dashboard-page .b2b-story-dots button.is-active{
width:6px;
height:6px;
}
}
@media (max-width:780px){
body.b2b-dashboard-page .b2b-lux-hero figure.b2b-story-figure{
min-height:300px;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-slide figcaption{
top:86px;
left:14px;
width:min(238px, calc(100% - 150px));
grid-template-columns:32px minmax(0,1fr);
gap:8px;
padding:9px;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-slide figcaption > i{
width:32px;
height:32px;
font-size:14px;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-slide figcaption strong{
margin-bottom:3px;
font-size:11.5px;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-slide figcaption small{
font-size:8.5px;
line-height:1.18;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-slide figcaption em{
display:none;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-bottom-info{
left:14px;
bottom:12px;
width:176px;
grid-template-columns:30px minmax(0,1fr);
gap:8px;
padding:9px 10px;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-bottom-info > i{
width:30px;
height:30px;
font-size:13px;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-bottom-info small{
font-size:8px;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-bottom-info strong{
font-size:10.5px;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-bottom-info em{
display:none;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-controls{
right:14px;
bottom:62px;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-pagination{
right:16px;
bottom:18px;
}
}
/* View Details booking panel: keep the approved design, only reduce visual scale. */
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking{
margin:10px 16px 16px;
padding:14px;
border-radius:14px;
box-shadow:0 10px 30px rgba(7,27,51,.055);
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking-head{
grid-template-columns:minmax(0,1fr) minmax(230px,.36fr);
gap:12px;
margin-bottom:12px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking-head small{
font-size:10px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking-head h3{
font-size:21px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking-head p{
grid-template-columns:30px minmax(0,1fr);
min-height:0;
padding:8px 10px;
border-radius:10px;
font-size:11.5px;
line-height:1.3;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking-head p i{
width:24px;
height:24px;
font-size:11px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-option-grid{
grid-template-columns:minmax(0,1.25fr) minmax(220px,1fr);
gap:10px;
margin-bottom:10px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-option{
grid-template-columns:46px minmax(0,1fr) auto 28px;
min-height:72px;
gap:10px;
padding:10px 12px;
border-radius:11px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-option-icon{
width:42px;
height:42px;
font-size:16px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-option-copy b{
font-size:16px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-option-copy em{
margin-left:6px;
padding:2px 7px;
font-size:9px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-option-copy small{
margin-top:4px;
font-size:11px;
line-height:1.25;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-option > strong{
font-size:16px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-option-check{
width:26px;
height:26px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-option-check::before{
font-size:12px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-option-chevron{
font-size:15px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-main-grid{
grid-template-columns:minmax(0,1.15fr) minmax(250px,.86fr);
gap:10px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-main-grid .b2b-full-container-panel,
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-main-grid .b2b-partial-access-panel,
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-main-grid .b2b-partial-controls{
padding:11px;
border-radius:11px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-card-title small{
font-size:10px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-card-title span{
padding:5px 8px;
font-size:10px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-main-grid h4{
margin:8px 0 5px;
font-size:16px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-main-grid p{
margin-bottom:9px;
font-size:11.5px;
line-height:1.35;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-stat-box{
margin-bottom:9px;
padding:10px;
border-radius:10px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-stat-box span{
padding:0 8px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-stat-box small{
font-size:8.5px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-stat-box b{
margin-top:4px;
font-size:13.5px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-offer-strip{
grid-template-columns:32px minmax(0,1fr) 138px;
gap:9px;
margin-bottom:9px;
padding:9px 10px;
border-radius:10px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-offer-strip > span{
width:27px;
height:27px;
font-size:13px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-offer-strip b{
font-size:12.5px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-offer-strip small,
body.b2b-dashboard-page .b2b-detail-panel .b2b-offer-result small{
margin-top:3px;
font-size:10.5px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-offer-strip button{
min-height:36px;
border-radius:8px;
font-size:11.5px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-actions{
gap:8px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-actions button,
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-main-grid .b2b-partial-access-panel .b2b-commercial-buttons button{
min-height:38px;
border-radius:8px;
font-size:12px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-vip-benefit-grid{
gap:8px !important;
margin:12px 0 11px !important;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-vip-benefit-grid li{
grid-template-columns:28px minmax(0,1fr);
gap:8px;
font-size:11.5px !important;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-vip-benefit-grid i{
width:28px;
height:28px;
font-size:12px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-trust-strip{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:9px;
margin-top:11px;
padding:10px 12px;
border-radius:10px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-trust-strip span{
grid-template-columns:30px minmax(0,1fr);
gap:8px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-trust-strip i{
width:30px;
height:30px;
font-size:13px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-trust-strip b{
font-size:11.5px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-trust-strip small{
font-size:10px;
}
@media (max-width:620px){
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking{
width:760px;
min-width:760px;
padding:12px;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking-head{
grid-template-columns:minmax(0,1fr) minmax(205px,.35fr);
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-option-grid{
grid-template-columns:minmax(0,1.2fr) minmax(205px,1fr);
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-main-grid{
grid-template-columns:minmax(0,1.12fr) minmax(230px,.85fr);
}
}
/* Same compact treatment for the actual open View Details modal. */
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking{
margin:10px 16px 16px;
padding:14px;
border-radius:14px;
box-shadow:0 10px 30px rgba(7,27,51,.055);
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking-head{
grid-template-columns:minmax(0,1fr) minmax(230px,.36fr);
gap:12px;
margin-bottom:12px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking-head small{ font-size:10px; }
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking-head h3{ font-size:21px; }
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking-head p{
grid-template-columns:30px minmax(0,1fr);
min-height:0;
padding:8px 10px;
border-radius:10px;
font-size:11.5px;
line-height:1.3;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking-head p i{
width:24px;
height:24px;
font-size:11px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-option-grid{
grid-template-columns:minmax(0,1.25fr) minmax(220px,1fr);
gap:10px;
margin-bottom:10px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-option{
grid-template-columns:46px minmax(0,1fr) auto 28px;
min-height:72px;
gap:10px;
padding:10px 12px;
border-radius:11px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-icon{
width:42px;
height:42px;
font-size:16px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-copy b{ font-size:16px; }
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-copy em{
margin-left:6px;
padding:2px 7px;
font-size:9px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-copy small{
margin-top:4px;
font-size:11px;
line-height:1.25;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-option > strong{ font-size:16px; }
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-check{
width:26px;
height:26px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-check::before{ font-size:12px; }
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-chevron{ font-size:15px; }
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid{
grid-template-columns:minmax(0,1.15fr) minmax(250px,.86fr);
gap:10px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid .b2b-full-container-panel,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid .b2b-partial-access-panel,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid .b2b-partial-controls{
padding:11px;
border-radius:11px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-card-title small{ font-size:10px; }
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-card-title span{
padding:5px 8px;
font-size:10px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid h4{
margin:8px 0 5px;
font-size:16px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid p{
margin-bottom:9px;
font-size:11.5px;
line-height:1.35;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-stat-box{
margin-bottom:9px;
padding:10px;
border-radius:10px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-stat-box span{ padding:0 8px; }
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-stat-box small{ font-size:8.5px; }
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-stat-box b{
margin-top:4px;
font-size:13.5px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-offer-strip{
grid-template-columns:32px minmax(0,1fr) 138px;
gap:9px;
margin-bottom:9px;
padding:9px 10px;
border-radius:10px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-offer-strip > span{
width:27px;
height:27px;
font-size:13px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-offer-strip b{ font-size:12.5px; }
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-offer-strip small,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-offer-result small{
margin-top:3px;
font-size:10.5px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-offer-strip button{
min-height:36px;
border-radius:8px;
font-size:11.5px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-actions{ gap:8px; }
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-actions button,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid .b2b-partial-access-panel .b2b-commercial-buttons button{
min-height:38px;
border-radius:8px;
font-size:12px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-vip-benefit-grid{
gap:8px !important;
margin:12px 0 11px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-vip-benefit-grid li{
grid-template-columns:28px minmax(0,1fr);
gap:8px;
font-size:11.5px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-vip-benefit-grid i{
width:28px;
height:28px;
font-size:12px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-trust-strip{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:9px;
margin-top:11px;
padding:10px 12px;
border-radius:10px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-trust-strip span{
grid-template-columns:30px minmax(0,1fr);
gap:8px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-trust-strip i{
width:30px;
height:30px;
font-size:13px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-trust-strip b{ font-size:11.5px; }
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-trust-strip small{ font-size:10px; }
@media (max-width:620px){
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking{
width:760px;
min-width:760px;
padding:12px;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking-head{
grid-template-columns:minmax(0,1fr) minmax(205px,.35fr);
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-option-grid{
grid-template-columns:minmax(0,1.2fr) minmax(205px,1fr);
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid{
grid-template-columns:minmax(0,1.12fr) minmax(230px,.85fr);
}
}
/* B2B customer shipment photo overlay: keep verified status visible without hiding the evidence photo. */
body.b2b-dashboard-page .b2b-story-card .b2b-story-slide::after{
background:
linear-gradient(180deg, rgba(2,15,31,.22) 0%, rgba(2,15,31,.05) 34%, rgba(2,15,31,.08) 58%, rgba(2,15,31,.62) 100%),
linear-gradient(90deg, rgba(1,10,22,.42) 0%, rgba(1,10,22,.12) 42%, rgba(1,10,22,.04) 100%);
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-status{
top:12px;
left:12px;
max-width:calc(100% - 92px);
padding:7px 11px;
border-radius:999px;
gap:6px;
font-size:9.5px;
line-height:1.1;
box-shadow:0 10px 22px rgba(2,16,32,.2), inset 0 1px 0 rgba(255,255,255,.2);
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-status::before{
width:16px;
height:16px;
font-size:8px;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-progress-label{
top:13px;
left:auto;
right:12px;
max-width:74px;
justify-content:center;
padding:7px 8px;
border-radius:999px;
background:rgba(5,27,51,.54);
font-size:8.5px;
line-height:1.05;
text-align:center;
box-shadow:0 10px 22px rgba(2,16,32,.16);
backdrop-filter:blur(8px);
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-progress-label i{
display:none;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-slide figcaption{
left:12px;
right:12px;
top:auto;
bottom:48px;
width:auto;
grid-template-columns:30px minmax(0,1fr);
gap:8px;
padding:8px 10px;
border-radius:12px;
background:rgba(3,19,39,.5);
box-shadow:0 10px 24px rgba(1,10,22,.2);
backdrop-filter:blur(8px);
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-slide figcaption > i{
width:30px;
height:30px;
font-size:13px;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-slide figcaption strong{
margin:0;
font-size:11px;
line-height:1.12;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-slide figcaption small{
display:none;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-slide figcaption em{
display:block;
margin-top:2px;
font-size:8px;
line-height:1.1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-bottom-info{
left:12px;
bottom:12px;
width:min(162px, calc(100% - 106px));
grid-template-columns:25px minmax(0,1fr);
gap:7px;
padding:7px 9px;
border-radius:11px;
background:rgba(3,19,39,.46);
box-shadow:0 10px 22px rgba(1,10,22,.18);
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-bottom-info > i{
width:25px;
height:25px;
font-size:11px;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-bottom-info small{
display:none;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-bottom-info strong{
margin:0;
font-size:10.5px;
line-height:1.05;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-controls{
right:12px;
bottom:44px;
gap:6px;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-controls button{
width:30px;
height:30px;
font-size:12px;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-pagination{
right:12px;
bottom:15px;
gap:7px;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-pagination > span{
display:none;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-dots{
gap:5px;
}
body.b2b-dashboard-page .b2b-story-card .b2b-story-dots button,
body.b2b-dashboard-page .b2b-story-card .b2b-story-dots button.is-active{
width:7px;
height:7px;
}
@media (max-width:760px){
body.b2b-dashboard-page .shipment-row .b2b-story-slide figcaption{
display:grid;
}
body.b2b-dashboard-page .shipment-row .b2b-story-progress-label{
top:13px;
right:12px;
left:auto;
max-width:74px;
padding:7px 8px;
background:rgba(5,27,51,.54);
font-size:8.5px;
}
}
/* Mobile customer shipment board: dedicated phone layout, desktop remains unchanged. */
@media (max-width:760px){
html,
body.b2b-dashboard-page{
max-width:100%;
overflow-x:hidden;
background:#f4f8fb;
}
body.b2b-dashboard-page .b2b-dash-main,
body.b2b-dashboard-page .b2b-dash-content{
width:100%;
max-width:100%;
overflow-x:hidden;
}
body.b2b-dashboard-page .b2b-dash-content{
padding:12px 12px 92px;
}
body.b2b-dashboard-page .b2b-title-row{
display:grid;
grid-template-columns:1fr;
gap:10px;
margin:10px 0 12px;
}
body.b2b-dashboard-page .b2b-title-row h1{
font-size:26px;
line-height:1.05;
word-break:normal;
overflow-wrap:normal;
}
body.b2b-dashboard-page .b2b-title-row p{
font-size:13px;
}
body.b2b-dashboard-page .b2b-feature-pills{
display:flex;
gap:8px;
overflow-x:auto;
padding-bottom:2px;
scrollbar-width:none;
}
body.b2b-dashboard-page .b2b-feature-pills::-webkit-scrollbar,
body.b2b-dashboard-page .b2b-tabs::-webkit-scrollbar,
body.b2b-dashboard-page .shipment-mini-tracking::-webkit-scrollbar{
display:none;
}
body.b2b-dashboard-page .b2b-feature-pills span{
flex:0 0 178px;
min-height:54px;
padding:9px 10px;
border-radius:14px;
}
body.b2b-dashboard-page .b2b-board-toolbar{
display:grid;
gap:10px;
margin:12px 0;
padding:0;
background:transparent;
border:0;
box-shadow:none;
}
body.b2b-dashboard-page .b2b-tabs{
display:flex;
gap:8px;
overflow-x:auto;
padding:2px 0 4px;
scrollbar-width:none;
}
body.b2b-dashboard-page .b2b-tabs button{
flex:0 0 auto;
min-height:38px;
padding:0 13px;
border-radius:999px;
font-size:12px;
white-space:nowrap;
}
body.b2b-dashboard-page .b2b-board-toolbar label{
justify-self:start;
width:100%;
max-width:220px;
font-size:11px;
}
body.b2b-dashboard-page #all-containers.b2b-board{
overflow-x:hidden;
overflow-y:visible;
margin-left:0;
margin-right:0;
padding:0 0 10px;
scroll-snap-type:none;
}
body.b2b-dashboard-page #all-containers .shipment-row{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
display:grid;
grid-template-columns:minmax(118px, 36%) minmax(0, 1fr);
grid-template-areas:
"photo info"
"photo products"
"tracking tracking"
"stock stock";
min-height:0;
margin:0 0 14px;
border:1px solid #dfe9ef;
border-radius:18px;
overflow:hidden;
scroll-snap-align:none;
transform:none !important;
zoom:1 !important;
background:#ffffff;
box-shadow:0 14px 34px rgba(6,27,51,.08);
}
body.b2b-dashboard-page #all-containers .shipment-photo{
grid-area:photo;
min-height:232px;
height:100%;
border-radius:0;
background:#061b33;
}
body.b2b-dashboard-page #all-containers .shipment-info,
body.b2b-dashboard-page #all-containers .shipment-products,
body.b2b-dashboard-page #all-containers .shipment-stock{
padding:12px;
border-right:0;
border-bottom:0;
}
body.b2b-dashboard-page #all-containers .shipment-info{
grid-area:info;
align-self:start;
}
body.b2b-dashboard-page #all-containers .shipment-products{
grid-area:products;
display:grid;
gap:7px;
border-top:0;
align-self:end;
}
body.b2b-dashboard-page #all-containers .shipment-route-title{
display:grid;
grid-template-columns:minmax(0,1fr);
align-items:center;
gap:4px;
margin:0 0 10px;
font-size:13px;
line-height:1.18;
text-transform:none;
}
body.b2b-dashboard-page #all-containers .shipment-route-title i{
display:none;
}
body.b2b-dashboard-page #all-containers .shipment-route-title span:last-child{
color:#061b33;
font-size:14px;
font-weight:1000;
text-transform:none;
word-break:normal;
overflow-wrap:anywhere;
}
body.b2b-dashboard-page #all-containers .shipment-facts{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
border-top:0;
}
body.b2b-dashboard-page #all-containers .shipment-facts span{
display:none;
min-height:48px;
padding:8px;
border:1px solid #e5edf2;
border-radius:10px;
background:#f8fbfd;
}
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(2),
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(3),
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(4),
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(8){
display:block;
}
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(n+5){
display:none;
}
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(8){
display:block;
grid-column:1 / -1;
background:#eef9fb;
border-color:#caedf2;
}
body.b2b-dashboard-page #all-containers .shipment-facts small,
body.b2b-dashboard-page #all-containers .shipment-stock span{
color:#607386;
font-size:9px;
line-height:1.12;
letter-spacing:.04em;
}
body.b2b-dashboard-page #all-containers .shipment-facts b,
body.b2b-dashboard-page #all-containers .shipment-stock b{
margin-top:4px;
color:#061b33;
font-size:11px;
line-height:1.15;
}
body.b2b-dashboard-page #all-containers .shipment-products h3{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin:0;
color:#061b33;
font-size:10px;
letter-spacing:.04em;
}
body.b2b-dashboard-page #all-containers .shipment-products h3 button{
min-height:28px;
padding:0 9px;
border-radius:999px;
font-size:9px;
}
body.b2b-dashboard-page #all-containers .shipment-product-card{
grid-template-columns:42px minmax(0,1fr) auto;
min-height:52px;
gap:7px;
padding:7px;
border:1px solid #e6eef4;
border-radius:11px;
background:#ffffff;
}
body.b2b-dashboard-page #all-containers .shipment-product-card:nth-of-type(n+3){
display:none;
}
body.b2b-dashboard-page #all-containers .shipment-product-card img{
width:42px;
height:34px;
border-radius:9px;
}
body.b2b-dashboard-page #all-containers .shipment-product-card b,
body.b2b-dashboard-page #all-containers .shipment-product-card strong,
body.b2b-dashboard-page #all-containers .shipment-product-card em{
grid-column:auto;
font-size:10px;
text-align:right;
}
body.b2b-dashboard-page #all-containers .shipment-product-card b{
text-align:left;
color:#061b33;
}
body.b2b-dashboard-page #all-containers .shipment-product-card small{
font-size:8.5px;
line-height:1.18;
}
body.b2b-dashboard-page #all-containers .shipment-stock{
grid-area:stock;
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
align-content:center;
text-align:center;
padding:11px 12px 12px;
border-top:1px solid #edf2f5;
background:linear-gradient(180deg,#ffffff,#f9fcfd);
}
body.b2b-dashboard-page #all-containers .shipment-stock span{
display:block;
min-height:38px;
padding:7px 6px;
border:1px solid #e1e9ef;
border-radius:10px;
background:#ffffff;
}
body.b2b-dashboard-page #all-containers .shipment-stock .available{
border-color:#bdebdc;
background:#f1fcf7;
}
body.b2b-dashboard-page #all-containers .shipment-stock a{
min-height:38px;
border-radius:11px;
font-size:10.5px;
font-weight:1000;
}
body.b2b-dashboard-page #all-containers .shipment-stock time{
grid-column:1 / -1;
display:block;
min-height:0;
color:#6a7e8f;
font-size:10px;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
grid-area:tracking;
overflow-x:auto;
padding:10px 12px;
border-top:1px solid #edf1f4;
border-right:0;
scrollbar-width:none;
}
body.b2b-dashboard-page #all-containers .mini-track-rail{
width:max-content;
min-width:520px;
grid-template-columns:repeat(10, 52px);
overflow:visible;
}
body.b2b-dashboard-page #all-containers .mini-track-step{
min-width:0;
}
body.b2b-dashboard-page #all-containers .mini-track-step b{
font-size:8.5px;
}
body.b2b-dashboard-page #all-containers .mini-track-step small{
font-size:7.5px;
}
body.b2b-dashboard-page #all-containers .shipment-row .b2b-story-slide figcaption,
body.b2b-dashboard-page #all-containers .shipment-row .b2b-story-progress-label,
body.b2b-dashboard-page #all-containers .shipment-row .b2b-story-route,
body.b2b-dashboard-page #all-containers .shipment-row .b2b-story-controls{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-row .b2b-story-reference{
left:10px;
right:10px;
bottom:42px;
max-width:calc(100% - 20px);
color:#ffffff;
font-size:17px !important;
line-height:1.05;
text-shadow:0 2px 10px rgba(0,0,0,.45);
}
body.b2b-dashboard-page #all-containers .shipment-row .b2b-story-status{
top:10px;
left:8px;
right:8px;
justify-content:center;
width:auto;
max-width:none;
min-height:30px;
padding:5px 7px;
background:#178b60;
color:#ffffff;
border-color:rgba(255,255,255,.28);
font-size:7.8px;
line-height:1.05;
white-space:normal;
text-align:center;
}
body.b2b-dashboard-page #all-containers .shipment-row .b2b-story-status::before{
display:none;
}
body.b2b-dashboard-page #all-containers .shipment-row[data-b2b-status="supply_confirmed"] .b2b-story-status,
body.b2b-dashboard-page #all-containers .shipment-photo.is-supply-confirmed .b2b-story-status{
background:#c89416;
}
body.b2b-dashboard-page #all-containers .shipment-row[data-b2b-status="onway"] .b2b-story-status{
background:#1687bd;
}
body.b2b-dashboard-page #all-containers .shipment-row[data-b2b-status="arrived"] .b2b-story-status{
background:#159a70;
}
body.b2b-dashboard-page #all-containers .shipment-row .b2b-story-dots{
left:10px;
right:auto;
bottom:16px;
}
}
@media (max-width:390px){
body.b2b-dashboard-page .b2b-dash-content{
padding-left:10px;
padding-right:10px;
}
body.b2b-dashboard-page #all-containers .shipment-row{
grid-template-columns:minmax(108px, 35%) minmax(0,1fr);
border-radius:16px;
}
body.b2b-dashboard-page #all-containers .shipment-photo{
min-height:222px;
}
body.b2b-dashboard-page #all-containers .shipment-info,
body.b2b-dashboard-page #all-containers .shipment-products,
body.b2b-dashboard-page #all-containers .shipment-stock{
padding:10px;
}
body.b2b-dashboard-page #all-containers .shipment-route-title span:last-child{
font-size:13px;
}
body.b2b-dashboard-page #all-containers .shipment-facts{
gap:6px;
}
body.b2b-dashboard-page #all-containers .shipment-facts span{
min-height:44px;
padding:7px;
}
body.b2b-dashboard-page #all-containers .shipment-product-card{
grid-template-columns:36px minmax(0,1fr);
}
body.b2b-dashboard-page #all-containers .shipment-product-card img{
width:36px;
height:30px;
}
body.b2b-dashboard-page #all-containers .shipment-product-card strong,
body.b2b-dashboard-page #all-containers .shipment-product-card em{
grid-column:2;
text-align:left;
}
}
@media (max-width:340px){
body.b2b-dashboard-page #all-containers .shipment-row{
grid-template-columns:1fr;
grid-template-areas:
"photo"
"info"
"products"
"tracking"
"stock";
}
body.b2b-dashboard-page #all-containers .shipment-photo{
min-height:190px;
}
}
/* System-wide responsive foundation for the B2B customer environment. */
body.b2b-dashboard-page{
--b2b-content-max:1680px;
--b2b-page-gutter:clamp(12px, 1.8vw, 28px);
--b2b-card-gap:clamp(12px, 1.4vw, 22px);
--b2b-control-height:44px;
--b2b-radius:clamp(12px, 1.1vw, 18px);
}
body.b2b-dashboard-page .b2b-dash-main{
min-width:0;
}
body.b2b-dashboard-page .b2b-dash-content{
width:min(100%, var(--b2b-content-max));
margin-inline:auto;
padding-inline:var(--b2b-page-gutter);
}
body.b2b-dashboard-page img,
body.b2b-dashboard-page video,
body.b2b-dashboard-page canvas,
body.b2b-dashboard-page iframe{
max-width:100%;
}
body.b2b-dashboard-page .b2b-modal-card{
width:min(1340px, calc(100vw - 32px));
}
body.b2b-dashboard-page .b2b-detail-progress,
body.b2b-dashboard-page .shipment-mini-tracking,
body.b2b-dashboard-page .b2b-board-toolbar,
body.b2b-dashboard-page .b2b-tabs{
max-width:100%;
}
@media (min-width:1600px){
body.b2b-dashboard-page .b2b-dash-content{
--b2b-content-max:1720px;
}
body.b2b-dashboard-page .shipment-row{
max-width:100%;
}
}
@media (max-width:1366px){
body.b2b-dashboard-page .b2b-live-map{
height:clamp(228px, 28vh, 286px);
min-height:228px;
}
body.b2b-dashboard-page .b2b-title-row h1{
font-size:clamp(28px, 2.7vw, 42px);
}
}
@media (max-height:760px) and (min-width:921px){
body.b2b-dashboard-page .b2b-live-map{
height:220px;
min-height:220px;
}
body.b2b-dashboard-page .b2b-dash-content{
padding-top:14px;
}
body.b2b-dashboard-page .b2b-title-row{
margin-bottom:12px;
}
}
@media (max-width:920px){
body.b2b-dashboard-page input,
body.b2b-dashboard-page select,
body.b2b-dashboard-page textarea{
font-size:16px;
}
body.b2b-dashboard-page .b2b-modal-card,
body.b2b-dashboard-page .b2b-lux-detail{
width:100vw;
max-width:100vw;
max-height:100dvh;
margin:0;
border-radius:0;
}
body.b2b-dashboard-page .b2b-documents-grid{
grid-template-columns:repeat(auto-fit, minmax(138px, 1fr));
}
body.b2b-dashboard-page .b2b-detail-grid{
grid-template-columns:repeat(2, minmax(0,1fr));
}
}
@media (max-width:620px){
body.b2b-dashboard-page .b2b-dash-content{
padding-inline:10px;
}
body.b2b-dashboard-page .b2b-lux-topbar nav{
overflow-x:auto;
scrollbar-width:none;
}
body.b2b-dashboard-page .b2b-lux-topbar nav::-webkit-scrollbar{
display:none;
}
body.b2b-dashboard-page .b2b-detail-grid,
body.b2b-dashboard-page .b2b-lux-facts,
body.b2b-dashboard-page .b2b-documents-grid,
body.b2b-dashboard-page .b2b-lux-products,
body.b2b-dashboard-page .b2b-lux-photo-gallery{
grid-template-columns:1fr;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-progress{
margin:0 10px 12px;
overflow-x:auto;
scrollbar-width:none;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-progress::-webkit-scrollbar{
display:none;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking{
width:100%;
min-width:0;
max-width:100%;
margin-inline:0;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-booking-head,
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-option-grid,
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-main-grid,
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-trust-strip,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking-head,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-option-grid,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-trust-strip{
grid-template-columns:1fr;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-option,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-option{
grid-template-columns:42px minmax(0,1fr) auto;
}
body.b2b-dashboard-page .b2b-detail-panel .b2b-approved-option > strong,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-option > strong{
grid-column:2 / -1;
}
body.b2b-dashboard-page .b2b-offer-strip,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-offer-strip{
grid-template-columns:36px minmax(0,1fr);
}
body.b2b-dashboard-page .b2b-offer-strip button,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-offer-strip button{
grid-column:1 / -1;
}
body.b2b-dashboard-page .b2b-approved-actions{
grid-template-columns:1fr;
}
}
/* Urgent mobile customer UX correction: compact B2B decision surface. */
@media (max-width:620px){
body.b2b-dashboard-page{
--b2b-page-gutter:10px;
}
body.b2b-dashboard-page .b2b-dash-content{
padding-bottom:78px;
}
body.b2b-dashboard-page .b2b-title-row{
margin-bottom:10px;
}
body.b2b-dashboard-page .b2b-feature-pills{
display:grid;
grid-template-columns:1fr;
overflow:visible;
}
body.b2b-dashboard-page .b2b-feature-pills span{
display:none;
}
body.b2b-dashboard-page .b2b-compact-request-btn{
display:grid;
width:100%;
min-height:54px;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map){
height:196px !important;
min-height:196px !important;
margin:8px 0 12px;
border-radius:14px;
overflow:hidden;
box-shadow:0 12px 28px rgba(7,38,61,.16);
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-head{
left:10px;
top:10px;
z-index:515;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-full-btn{
min-height:34px;
padding:0 12px;
border-radius:10px;
font-size:11px;
box-shadow:0 10px 20px rgba(2,24,43,.2);
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-explore-btn{
max-width:188px;
min-height:48px;
gap:8px;
padding:7px 10px;
border-radius:12px;
transform:translateY(18px);
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-explore-btn > i{
width:32px;
height:32px;
border-radius:9px;
font-size:13px;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-explore-btn b{
font-size:11px;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-explore-btn small{
font-size:9px;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-mobile-timeline,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-mobile-map-metrics,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-mobile-status,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-mobile-live-label,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-summary,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-pin span,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .leaflet-popup-pane{
display:none !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-pin,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-pin.container,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-pin.loading{
width:34px;
height:34px;
border-width:2px;
border-radius:50%;
box-shadow:0 0 0 7px rgba(11,201,223,.16), 0 8px 20px rgba(2,24,43,.28);
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-pin img{
border-radius:50%;
}
body.b2b-dashboard-page .b2b-board-toolbar{
gap:8px;
margin:8px 0 10px;
}
body.b2b-dashboard-page .b2b-tabs{
gap:7px;
margin-right:-10px;
padding:2px 16px 5px 0;
scroll-padding-inline:10px;
-webkit-overflow-scrolling:touch;
}
body.b2b-dashboard-page .b2b-tabs button{
min-height:36px;
padding:0 13px;
font-size:11.5px;
}
body.b2b-dashboard-page .b2b-board-toolbar label{
display:none;
}
body.b2b-dashboard-page #all-containers.b2b-board{
padding-bottom:6px;
}
body.b2b-dashboard-page #all-containers .shipment-row{
grid-template-columns:minmax(126px, 38%) minmax(0, 1fr) !important;
grid-template-areas:
"photo info"
"products products"
"tracking tracking"
"stock stock" !important;
margin-bottom:12px;
border-radius:16px;
box-shadow:0 12px 26px rgba(6,27,51,.075);
}
body.b2b-dashboard-page #all-containers .shipment-photo{
min-height:0 !important;
height:172px !important;
align-self:stretch;
}
body.b2b-dashboard-page #all-containers .shipment-photo img,
body.b2b-dashboard-page #all-containers .b2b-story-slide,
body.b2b-dashboard-page #all-containers .b2b-story-slide img{
height:100%;
object-fit:cover;
}
body.b2b-dashboard-page #all-containers .shipment-info{
display:grid;
align-content:start;
gap:8px;
padding:11px 10px 8px;
}
body.b2b-dashboard-page #all-containers .shipment-route-title{
margin:0;
gap:3px;
}
body.b2b-dashboard-page #all-containers .shipment-route-title span:first-child{
color:#0b7890;
font-size:10px;
font-weight:1000;
letter-spacing:.03em;
text-transform:uppercase;
}
body.b2b-dashboard-page #all-containers .shipment-route-title span:last-child{
font-size:14px;
line-height:1.08;
}
body.b2b-dashboard-page #all-containers .shipment-facts{
grid-template-columns:1fr;
gap:6px;
}
body.b2b-dashboard-page #all-containers .shipment-facts span{
min-height:0;
padding:6px 8px;
border-radius:9px;
background:#f8fbfd;
}
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(2),
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(3),
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(8){
display:block;
}
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(4){
display:none;
}
body.b2b-dashboard-page #all-containers .shipment-facts small{
font-size:8.5px;
}
body.b2b-dashboard-page #all-containers .shipment-facts b{
margin-top:2px;
font-size:10.5px;
}
body.b2b-dashboard-page #all-containers .shipment-products{
padding:8px 10px 6px;
border-top:1px solid #edf2f5;
}
body.b2b-dashboard-page #all-containers .shipment-products h3{
margin-bottom:0;
font-size:0;
letter-spacing:0;
}
body.b2b-dashboard-page #all-containers .shipment-products h3::before{
content:"Product";
color:#5b7284;
font-size:9px;
font-weight:950;
letter-spacing:.05em;
text-transform:uppercase;
}
body.b2b-dashboard-page #all-containers .shipment-products h3 button{
min-height:24px;
padding:0 8px;
font-size:8.5px;
}
body.b2b-dashboard-page #all-containers .shipment-product-card{
grid-template-columns:40px minmax(0,1fr) auto;
min-height:48px;
gap:7px;
padding:6px;
border-radius:10px;
}
body.b2b-dashboard-page #all-containers .shipment-product-card img{
width:40px;
height:32px;
}
body.b2b-dashboard-page #all-containers .shipment-product-card b{
font-size:10px;
}
body.b2b-dashboard-page #all-containers .shipment-product-card small{
font-size:8px;
}
body.b2b-dashboard-page #all-containers .shipment-product-card strong{
display:none;
}
body.b2b-dashboard-page #all-containers .shipment-product-card em{
color:#149966;
font-size:10px;
font-weight:1000;
line-height:1.05;
}
body.b2b-dashboard-page #all-containers .shipment-product-card i{
display:none;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
padding:7px 10px;
}
body.b2b-dashboard-page #all-containers .mini-track-rail{
min-width:430px;
grid-template-columns:repeat(10, 43px);
}
body.b2b-dashboard-page #all-containers .mini-track-step i{
width:24px;
height:24px;
font-size:9px;
}
body.b2b-dashboard-page #all-containers .mini-track-step b{
max-width:42px;
font-size:7.5px;
}
body.b2b-dashboard-page #all-containers .mini-track-step small{
display:none;
}
body.b2b-dashboard-page #all-containers .mini-current-status{
margin-top:4px;
padding:6px 8px;
font-size:9px;
}
body.b2b-dashboard-page #all-containers .mini-current-status time{
display:none;
}
body.b2b-dashboard-page #all-containers .shipment-stock{
grid-template-columns:1fr 1fr;
gap:7px;
padding:8px 10px 10px;
}
body.b2b-dashboard-page #all-containers .shipment-stock span{
display:none;
}
body.b2b-dashboard-page #all-containers .shipment-stock .available{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a{
min-height:36px;
font-size:10px;
}
body.b2b-dashboard-page #all-containers .shipment-stock time{
display:none;
}
body.b2b-dashboard-page #all-containers .shipment-row .b2b-story-status{
top:9px;
left:8px;
right:auto;
width:auto;
max-width:calc(100% - 16px);
min-height:26px;
padding:5px 10px;
border-radius:999px;
font-size:7.4px;
letter-spacing:.02em;
white-space:nowrap;
}
body.b2b-dashboard-page #all-containers .shipment-row .b2b-story-reference,
body.b2b-dashboard-page #all-containers .shipment-row .b2b-story-bottom-info{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-row .b2b-story-dots{
left:10px;
bottom:9px;
}
body.b2b-dashboard-page .b2b-mobile-bottom{
min-height:62px;
padding:5px 6px max(6px, env(safe-area-inset-bottom));
}
body.b2b-dashboard-page .b2b-mobile-bottom a{
gap:2px;
min-height:50px;
font-size:10px;
}
}
@media (max-width:390px){
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map){
height:188px !important;
min-height:188px !important;
}
body.b2b-dashboard-page #all-containers .shipment-row{
grid-template-columns:minmax(116px, 37%) minmax(0,1fr) !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo{
height:166px !important;
}
body.b2b-dashboard-page #all-containers .shipment-route-title span:last-child{
font-size:13px;
}
body.b2b-dashboard-page #all-containers .shipment-product-card{
grid-template-columns:36px minmax(0,1fr) auto;
}
body.b2b-dashboard-page #all-containers .shipment-product-card img{
width:36px;
height:30px;
}
}
@media (max-width:340px){
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map){
height:180px !important;
min-height:180px !important;
}
body.b2b-dashboard-page #all-containers .shipment-row{
grid-template-columns:minmax(104px, 36%) minmax(0,1fr) !important;
grid-template-areas:
"photo info"
"products products"
"tracking tracking"
"stock stock" !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo{
height:158px !important;
}
}
/* Mobile header bug fix: keep logo, notification, VIP and menu frozen as one header. */
@media (max-width:620px){
body.b2b-dashboard-page .b2b-app-shell{
display:block;
}
body.b2b-dashboard-page .b2b-sidebar{
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
z-index:80 !important;
width:100% !important;
height:118px !important;
min-height:118px !important;
border-radius:0 !important;
}
body.b2b-dashboard-page .b2b-topbar{
position:fixed !important;
top:34px !important;
right:14px !important;
left:auto !important;
z-index:90 !important;
}
body.b2b-dashboard-page .b2b-dash-main{
padding-top:118px !important;
}
body.b2b-dashboard-page .b2b-mobile-drawer{
z-index:120;
}
}
@media (max-width:360px){
body.b2b-dashboard-page .b2b-sidebar{
height:108px !important;
min-height:108px !important;
}
body.b2b-dashboard-page .b2b-topbar{
top:31px !important;
right:12px !important;
}
body.b2b-dashboard-page .b2b-dash-main{
padding-top:108px !important;
}
}
@media (max-width:620px){
body.b2b-dashboard-page #all-containers .shipment-info{
gap:6px !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts{
gap:5px !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts span{
min-height:28px !important;
padding:5px 7px !important;
border-radius:8px !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts small{
font-size:8px !important;
line-height:1 !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts b{
margin-top:1px !important;
font-size:10px !important;
line-height:1.05 !important;
}
body.b2b-dashboard-page #all-containers .shipment-products{
gap:5px !important;
padding:6px 9px 5px !important;
}
body.b2b-dashboard-page #all-containers .shipment-products h3{
min-height:20px !important;
height:20px !important;
margin:0 !important;
color:transparent !important;
font-size:0 !important;
line-height:0 !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers .shipment-products h3::before{
content:"Product" !important;
color:#5b7284 !important;
font-size:9px !important;
line-height:20px !important;
}
body.b2b-dashboard-page #all-containers .shipment-products h3 button{
color:#0b63ce !important;
font-size:8px !important;
line-height:1 !important;
}
body.b2b-dashboard-page #all-containers .shipment-product-card{
min-height:42px !important;
padding:5px !important;
}
body.b2b-dashboard-page #all-containers .shipment-product-card img{
height:28px !important;
}
body.b2b-dashboard-page #all-containers .shipment-product-card em small{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
max-height:62px !important;
padding:6px 9px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail{
min-width:388px !important;
grid-template-columns:repeat(10, 38px) !important;
min-height:32px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail::before,
body.b2b-dashboard-page #all-containers .mini-track-rail::after{
top:12px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-step{
gap:2px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-step i{
width:22px !important;
height:22px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-step b{
display:none !important;
}
body.b2b-dashboard-page #all-containers .mini-current-status{
min-height:20px !important;
margin-top:3px !important;
padding:4px 7px !important;
}
body.b2b-dashboard-page #all-containers .mini-current-status small{
display:none !important;
}
body.b2b-dashboard-page #all-containers .mini-current-status b{
font-size:8.5px !important;
line-height:1.1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock{
min-height:46px !important;
padding:6px 9px 8px !important;
align-items:center !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a{
min-height:34px !important;
padding:0 8px !important;
}
}
/* Final B2B map guard: normal preview shows only the View Full Map button. */
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-head{
left:16px !important;
right:auto !important;
top:14px !important;
width:auto !important;
min-height:0 !important;
display:block !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
backdrop-filter:none !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-head > div,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-metrics{
display:none !important;
}
/* Compact marketplace visual zone: one premium map/banner area with less empty space. */
body.b2b-dashboard-page .b2b-dash-content{
padding-top:16px !important;
}
body.b2b-dashboard-page .b2b-title-row{
margin:0 0 10px !important;
padding:0 !important;
}
body.b2b-dashboard-page .b2b-title-row > div:first-child{
display:flex !important;
align-items:flex-end;
justify-content:space-between;
gap:12px 18px;
padding:0 4px 0 14px;
border-left:4px solid #d6a136;
}
body.b2b-dashboard-page .b2b-title-row h1{
margin:0 !important;
font-size:clamp(24px,2.2vw,34px) !important;
line-height:1.05 !important;
}
body.b2b-dashboard-page .b2b-title-row p{
margin:3px 0 0 !important;
max-width:690px;
color:#526473;
font-size:13px !important;
line-height:1.42 !important;
}
body.b2b-dashboard-page .b2b-title-row .b2b-how-it-works{
flex:0 0 auto;
margin:0 !important;
min-height:38px;
padding:0 14px !important;
}
body.b2b-dashboard-page .b2b-market-visual{
margin:0 0 12px !important;
min-height:clamp(250px,21vw,332px) !important;
border-radius:20px !important;
}
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-map,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map,
body.b2b-dashboard-page .b2b-market-banner-track{
min-height:clamp(250px,21vw,332px) !important;
}
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map,
body.b2b-dashboard-page .b2b-visual-banner{
border-radius:20px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide{
padding:30px 82px 42px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide small{
margin-bottom:10px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide h2{
font-size:clamp(28px,3.2vw,46px) !important;
line-height:.98 !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide p{
margin:11px 0 17px !important;
font-size:15px !important;
line-height:1.35 !important;
}
body.b2b-dashboard-page .b2b-market-search-row{
margin:0 0 12px !important;
}
body.b2b-dashboard-page .b2b-board{
margin-top:0 !important;
}
@media (max-width:920px){
body.b2b-dashboard-page .b2b-title-row > div:first-child{
align-items:flex-start;
}
body.b2b-dashboard-page .b2b-title-row .b2b-how-it-works{
min-height:34px;
}
body.b2b-dashboard-page .b2b-market-visual,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-map,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map,
body.b2b-dashboard-page .b2b-market-banner-track{
min-height:230px !important;
}
}
@media (max-width:620px){
body.b2b-dashboard-page .b2b-dash-content{
padding-top:8px !important;
}
body.b2b-dashboard-page .b2b-market-visual{
margin-bottom:10px !important;
}
body.b2b-dashboard-page .b2b-market-visual,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-map,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map,
body.b2b-dashboard-page .b2b-market-banner-track{
min-height:216px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide{
padding:24px 48px 38px !important;
}
}
/* Global Seafood Marketplace shared map/banner zone. */
body.b2b-dashboard-page .b2b-topbar{
justify-content:space-between !important;
gap:18px !important;
}
body.b2b-dashboard-page .b2b-page-identity{
display:flex;
align-items:center;
gap:10px;
min-width:260px;
color:#071b33;
}
body.b2b-dashboard-page .b2b-page-identity > span{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:14px;
color:#d6a136;
background:rgba(214,161,54,.12);
border:1px solid rgba(214,161,54,.22);
}
body.b2b-dashboard-page .b2b-page-identity b{
display:block;
font-size:18px;
line-height:1.05;
letter-spacing:-.01em;
}
body.b2b-dashboard-page .b2b-page-identity small{
display:block;
margin-top:3px;
color:#5e7080;
font-size:11px;
font-weight:800;
}
body.b2b-dashboard-page .b2b-title-row{
grid-template-columns:1fr !important;
margin-bottom:14px !important;
}
body.b2b-dashboard-page .b2b-title-row h1{
font-size:clamp(26px,3vw,42px) !important;
letter-spacing:-.02em !important;
}
body.b2b-dashboard-page .b2b-feature-pills{
display:none !important;
}
body.b2b-dashboard-page .b2b-market-visual{
position:relative;
margin:0 0 16px;
min-height:clamp(292px,25vw,390px);
border-radius:22px;
isolation:isolate;
}
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-map,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner{
min-height:clamp(292px,25vw,390px);
}
body.b2b-dashboard-page .b2b-market-visual.is-map-mode .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-visual.is-banner-mode .b2b-visual-map{
display:none !important;
}
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map{
margin:0 !important;
min-height:clamp(292px,25vw,390px) !important;
border-radius:22px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-map-actions{
display:flex;
align-items:center;
gap:10px;
margin-left:auto;
}
body.b2b-dashboard-page .b2b-map-collapse-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:40px;
padding:0 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.22);
background:rgba(7,27,51,.62);
color:#fff;
font-weight:900;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-visual-banner{
position:relative;
overflow:hidden;
border-radius:22px;
background:#061b33;
box-shadow:0 24px 55px rgba(7,27,51,.18);
}
body.b2b-dashboard-page .b2b-market-banner-track{
position:relative;
min-height:clamp(292px,25vw,390px);
}
body.b2b-dashboard-page .b2b-market-banner-slide{
position:absolute;
inset:0;
display:grid;
align-items:center;
grid-template-columns:minmax(0,1fr);
padding:42px 96px;
color:#fff;
opacity:0;
transform:translateX(18px);
transition:opacity .65s ease, transform .7s ease;
pointer-events:none;
}
body.b2b-dashboard-page .b2b-market-banner-slide.is-active{
opacity:1;
transform:translateX(0);
pointer-events:auto;
}
body.b2b-dashboard-page .b2b-market-banner-slide::before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(90deg, rgba(3,18,34,.95) 0%, rgba(5,28,51,.76) 42%, rgba(5,28,51,.18) 100%);
}
body.b2b-dashboard-page .b2b-market-banner-slide img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
opacity:.74;
}
body.b2b-dashboard-page .b2b-market-banner-slide > div{
position:relative;
z-index:2;
max-width:520px;
}
body.b2b-dashboard-page .b2b-market-banner-slide small{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
color:#f4c45d;
font-size:12px;
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-market-banner-slide h2{
margin:0;
color:#fff;
font-size:clamp(31px,4vw,58px);
line-height:.94;
letter-spacing:-.03em;
}
body.b2b-dashboard-page .b2b-market-banner-slide h2::first-line{
color:#fff;
}
body.b2b-dashboard-page .b2b-market-banner-slide p{
margin:15px 0 22px;
color:rgba(255,255,255,.9);
font-size:17px;
font-weight:800;
}
body.b2b-dashboard-page .b2b-market-banner-slide a{
display:inline-flex;
align-items:center;
gap:10px;
min-height:44px;
padding:0 18px;
border-radius:12px;
background:linear-gradient(135deg,#f5cf65,#d6a136);
color:#061b33;
font-weight:950;
text-decoration:none;
box-shadow:0 14px 26px rgba(214,161,54,.24);
}
body.b2b-dashboard-page .b2b-banner-arrow{
position:absolute;
top:50%;
z-index:3;
display:grid;
place-items:center;
width:42px;
height:42px;
border:1px solid rgba(255,255,255,.22);
border-radius:50%;
background:rgba(7,27,51,.58);
color:#fff;
cursor:pointer;
transform:translateY(-50%);
}
body.b2b-dashboard-page .b2b-banner-arrow.prev{ left:22px; }
body.b2b-dashboard-page .b2b-banner-arrow.next{ right:22px; }
body.b2b-dashboard-page .b2b-banner-dots{
position:absolute;
left:50%;
bottom:18px;
z-index:3;
display:flex;
gap:8px;
transform:translateX(-50%);
}
body.b2b-dashboard-page .b2b-banner-dots button{
width:9px;
height:9px;
border:0;
border-radius:999px;
background:rgba(255,255,255,.62);
cursor:pointer;
}
body.b2b-dashboard-page .b2b-banner-dots button.is-active{
width:28px;
background:#f5c85a;
}
body.b2b-dashboard-page .b2b-floating-map-btn{
position:fixed;
right:24px;
top:54%;
z-index:90;
display:none;
grid-template-columns:36px minmax(0,1fr);
align-items:center;
gap:8px 10px;
width:118px;
min-height:92px;
padding:13px;
border:1px solid rgba(214,161,54,.72);
border-radius:20px;
background:#061b33;
color:#fff;
box-shadow:0 18px 40px rgba(7,27,51,.28);
cursor:pointer;
}
body.b2b-dashboard-page.b2b-market-banner-active .b2b-floating-map-btn{
display:grid;
}
body.b2b-dashboard-page .b2b-floating-map-btn > i{
grid-row:1 / 3;
display:grid;
place-items:center;
width:36px;
height:36px;
border-radius:14px;
background:rgba(44,193,201,.14);
color:#f5c85a;
font-size:19px;
}
body.b2b-dashboard-page .b2b-floating-map-btn span{
display:flex;
align-items:center;
gap:5px;
color:#33d17a;
font-size:11px;
font-weight:950;
}
body.b2b-dashboard-page .b2b-floating-map-btn span em{
width:7px;
height:7px;
border-radius:50%;
background:#33d17a;
box-shadow:0 0 0 0 rgba(51,209,122,.55);
animation:b2bLiveDotPulse 2.4s ease-out infinite;
}
body.b2b-dashboard-page .b2b-floating-map-btn b{
color:#fff;
font-size:13px;
line-height:1;
}
body.b2b-dashboard-page .b2b-market-search-row{
display:flex;
justify-content:flex-end;
align-items:center;
gap:12px;
margin:0 0 16px;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search{
width:min(100%, 560px) !important;
}
body.b2b-dashboard-page .b2b-advanced-search-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:46px;
padding:0 16px;
border-radius:14px;
border:1px solid #d9e6ed;
background:#fff;
color:#071b33;
font-weight:900;
cursor:pointer;
}
@media (max-width:920px){
body.b2b-dashboard-page .b2b-page-identity small{
display:none;
}
body.b2b-dashboard-page .b2b-market-visual,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-map,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map,
body.b2b-dashboard-page .b2b-market-banner-track{
min-height:260px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide{
padding:28px 58px 42px;
}
body.b2b-dashboard-page .b2b-market-banner-slide h2{
font-size:31px;
}
body.b2b-dashboard-page .b2b-market-banner-slide p{
font-size:13px;
}
body.b2b-dashboard-page .b2b-banner-arrow{
width:36px;
height:36px;
}
body.b2b-dashboard-page .b2b-banner-arrow.prev{ left:12px; }
body.b2b-dashboard-page .b2b-banner-arrow.next{ right:12px; }
body.b2b-dashboard-page .b2b-market-search-row{
align-items:stretch;
flex-direction:column;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search,
body.b2b-dashboard-page .b2b-advanced-search-btn{
width:100% !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn{
top:auto;
right:14px;
bottom:86px;
width:104px;
min-height:74px;
border-radius:16px;
padding:10px;
}
}
@media (prefers-reduced-motion: reduce){
body.b2b-dashboard-page .b2b-market-banner-slide{
transition:none !important;
transform:none !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn span em{
animation:none !important;
}
}
/* Collapsible B2B sidebar: FishMarket.ai opens the menu, and the page resizes automatically. */
body.b2b-dashboard-page .b2b-app-shell{
grid-template-columns:104px minmax(0, 1fr) !important;
transition:grid-template-columns .28s cubic-bezier(.2,.85,.24,1);
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-open{
grid-template-columns:292px minmax(0, 1fr) !important;
}
body.b2b-dashboard-page .b2b-sidebar{
overflow:hidden !important;
transition:box-shadow .28s ease, padding .28s ease;
}
body.b2b-dashboard-page .b2b-sidebar-toggle{
appearance:none;
-webkit-appearance:none;
width:100%;
border:1px solid rgba(214,173,72,.28);
border-radius:18px;
background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
color:inherit;
cursor:pointer;
font:inherit;
text-align:left;
box-shadow:0 12px 26px rgba(0,0,0,.18);
}
body.b2b-dashboard-page .b2b-sidebar-toggle:focus-visible{
outline:3px solid rgba(44,193,201,.45);
outline-offset:3px;
}
body.b2b-dashboard-page .b2b-sidebar-toggle-icon{
margin-left:auto;
color:#d6ad48;
font-size:13px;
transition:transform .26s ease;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-open .b2b-sidebar-toggle-icon{
transform:rotate(180deg);
}
body.b2b-dashboard-page .b2b-sidebar-panel{
display:grid;
gap:14px;
max-height:0;
opacity:0;
overflow:hidden;
pointer-events:none;
transform:translateY(-8px);
transition:max-height .3s ease, opacity .22s ease, transform .26s ease, margin .22s ease;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-open .b2b-sidebar-panel{
max-height:calc(100vh - 102px);
margin-top:14px;
opacity:1;
overflow-y:auto;
pointer-events:auto;
transform:translateY(0);
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand{
flex-direction:column;
justify-content:center;
gap:7px;
padding:10px 8px;
min-height:78px;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand span{
display:none;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-sidebar-toggle-icon{
display:none;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand::after{
content:"Menu";
display:inline-flex;
align-items:center;
justify-content:center;
min-width:48px;
min-height:20px;
padding:0 8px;
border:1px solid rgba(214,173,72,.36);
border-radius:999px;
background:rgba(214,173,72,.14);
color:#f6d46b;
font-size:10px;
font-weight:900;
letter-spacing:.12em;
line-height:1;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-sidebar{
padding-left:14px !important;
padding-right:14px !important;
}
@media (max-width:920px){
body.b2b-dashboard-page .b2b-app-shell,
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-open,
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed{
display:block !important;
}
body.b2b-dashboard-page .b2b-sidebar{
position:sticky !important;
top:0 !important;
z-index:130 !important;
height:auto !important;
max-height:none !important;
overflow:visible !important;
padding:12px 14px !important;
}
body.b2b-dashboard-page .b2b-sidebar-toggle{
min-height:62px;
padding:9px 12px;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand{
flex-direction:row;
justify-content:flex-start;
gap:10px;
min-height:62px;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand::after{
display:none;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand span{
display:block;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-sidebar-toggle-icon{
display:inline-flex;
}
body.b2b-dashboard-page .b2b-sidebar-panel{
max-height:0 !important;
margin-top:0;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-open .b2b-sidebar-panel{
max-height:72vh !important;
margin-top:12px;
overflow-y:auto !important;
}
body.b2b-dashboard-page .b2b-sidebar-panel .b2b-side-nav{
display:grid !important;
}
body.b2b-dashboard-page .b2b-sidebar-panel .b2b-help-card{
display:flex !important;
}
}
/* Premium sparkle attention treatment for customer View Details CTAs only. */
body.b2b-dashboard-page .b2b-sparkle-cta{
position:relative !important;
isolation:isolate;
overflow:visible !important;
border:1px solid rgba(91,183,255,.58) !important;
background:
radial-gradient(circle at 30% 0%, rgba(96,190,255,.25), transparent 34%),
linear-gradient(135deg, #061a38 0%, #092b58 58%, #061b36 100%) !important;
color:#fff !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 18px rgba(37,148,255,.24),
0 12px 26px rgba(3,20,44,.18) !important;
text-shadow:0 1px 8px rgba(255,255,255,.18);
transform:translateZ(0);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease !important;
}
body.b2b-dashboard-page .b2b-sparkle-cta::before,
body.b2b-dashboard-page .b2b-sparkle-cta::after{
content:"";
position:absolute;
pointer-events:none;
z-index:-1;
opacity:0;
}
body.b2b-dashboard-page .b2b-sparkle-cta::before{
inset:-7px;
border-radius:inherit;
background:
radial-gradient(circle at 8% 20%, rgba(255,255,255,.95) 0 1.5px, transparent 2px),
radial-gradient(circle at 18% 92%, rgba(90,200,255,.95) 0 1.7px, transparent 2.5px),
radial-gradient(circle at 38% -2%, rgba(255,255,255,.86) 0 1.2px, transparent 2px),
radial-gradient(circle at 64% 104%, rgba(104,205,255,.94) 0 1.6px, transparent 2.4px),
radial-gradient(circle at 88% 18%, rgba(255,255,255,.92) 0 1.5px, transparent 2.4px),
radial-gradient(circle at 102% 64%, rgba(70,177,255,.95) 0 2px, transparent 3px);
filter:drop-shadow(0 0 5px rgba(81,189,255,.92));
}
body.b2b-dashboard-page .b2b-sparkle-cta::after{
inset:-3px;
border-radius:inherit;
border:1px solid rgba(125,211,255,.74);
box-shadow:
0 0 12px rgba(50,168,255,.58),
0 0 28px rgba(87,205,255,.32),
0 0 44px rgba(255,255,255,.16);
}
body.b2b-dashboard-page .b2b-sparkle-cta.is-sparkle-ready{
animation:b2bSparkleButton var(--sparkle-cycle, 8s) ease-in-out var(--sparkle-delay, 0s) infinite;
}
body.b2b-dashboard-page .b2b-sparkle-cta.is-sparkle-ready::before{
animation:b2bSparklePoints var(--sparkle-cycle, 8s) ease-in-out var(--sparkle-delay, 0s) infinite;
}
body.b2b-dashboard-page .b2b-sparkle-cta.is-sparkle-ready::after{
animation:b2bSparkleHalo var(--sparkle-cycle, 8s) ease-in-out var(--sparkle-delay, 0s) infinite;
}
body.b2b-dashboard-page .b2b-sparkle-cta:hover,
body.b2b-dashboard-page .b2b-sparkle-cta:focus-visible{
border-color:rgba(179,232,255,.95) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.18) inset,
0 0 18px rgba(73,188,255,.66),
0 0 38px rgba(73,188,255,.28),
0 16px 30px rgba(3,20,44,.24) !important;
transform:translateY(-1px) scale(1.012);
}
body.b2b-dashboard-page .b2b-sparkle-cta:focus-visible{
outline:3px solid rgba(204,232,255,.88) !important;
outline-offset:3px;
}
body.b2b-dashboard-page .b2b-sparkle-cta.is-pressed,
body.b2b-dashboard-page .b2b-sparkle-cta:active{
transform:translateY(0) scale(.985);
filter:saturate(1.04);
}
body.b2b-dashboard-page .b2b-sparkle-cta.is-loading{
animation:none !important;
cursor:progress;
}
body.b2b-dashboard-page .b2b-sparkle-cta.is-loading::before{
display:none;
}
body.b2b-dashboard-page .b2b-sparkle-cta.is-loading::after{
inset:8px auto 8px 12px;
width:14px;
height:14px;
border-radius:999px;
border:2px solid rgba(255,255,255,.35);
border-top-color:#fff;
box-shadow:none;
animation:b2bSparkleSpin .72s linear infinite;
opacity:1;
}
@keyframes b2bSparkleButton{
0%, 58%, 100%{
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 16px rgba(37,148,255,.22),
0 12px 26px rgba(3,20,44,.18);
}
9%, 22%{
box-shadow:
0 0 0 1px rgba(255,255,255,.19) inset,
0 0 22px rgba(91,204,255,.76),
0 0 48px rgba(63,165,255,.32),
0 13px 28px rgba(3,20,44,.2);
}
}
@keyframes b2bSparklePoints{
0%, 56%, 100%{ opacity:0; transform:scale(.88) rotate(0deg); }
8%{ opacity:.72; transform:scale(1) rotate(4deg); }
17%{ opacity:1; transform:scale(1.07) rotate(-3deg); }
27%{ opacity:.22; transform:scale(1.02) rotate(5deg); }
}
@keyframes b2bSparkleHalo{
0%, 58%, 100%{ opacity:0; transform:scale(.98); }
10%{ opacity:.6; transform:scale(1.02); }
20%{ opacity:.88; transform:scale(1.055); }
31%{ opacity:.18; transform:scale(1.01); }
}
@keyframes b2bSparkleSpin{
to{ transform:rotate(360deg); }
}
@media (max-width:780px){
body.b2b-dashboard-page .b2b-sparkle-cta{
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 12px rgba(37,148,255,.22),
0 8px 18px rgba(3,20,44,.15) !important;
}
body.b2b-dashboard-page .b2b-sparkle-cta::before{
inset:-4px;
filter:drop-shadow(0 0 3px rgba(81,189,255,.82));
}
body.b2b-dashboard-page .b2b-sparkle-cta::after{
inset:-2px;
}
}
@media (prefers-reduced-motion: reduce){
body.b2b-dashboard-page .b2b-sparkle-cta,
body.b2b-dashboard-page .b2b-sparkle-cta::before,
body.b2b-dashboard-page .b2b-sparkle-cta::after{
animation:none !important;
transition:none !important;
}
body.b2b-dashboard-page .b2b-sparkle-cta{
border-color:rgba(108,200,255,.72) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.12) inset,
0 0 16px rgba(37,148,255,.32) !important;
}
}
/* B2B remembered customer account identity */
body.b2b-dashboard-page .b2b-account.is-signed-in{
min-height:46px;
padding:6px 14px 6px 8px;
border-color:rgba(226,176,74,.72) !important;
border-radius:16px;
color:#fff !important;
background:linear-gradient(135deg,#061427 0%,#071c36 58%,#031020 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.07),
0 0 0 1px rgba(226,176,74,.15),
0 10px 30px rgba(226,176,74,.18),
0 0 22px rgba(226,176,74,.20) !important;
}
body.b2b-dashboard-page .b2b-account.is-signed-in b{
color:#fff !important;
font-size:13px;
font-weight:950;
}
body.b2b-dashboard-page .b2b-account.is-signed-in small{
color:rgba(255,255,255,.68) !important;
font-weight:800 !important;
}
body.b2b-dashboard-page .b2b-account.is-signed-in .fa-chevron-down{
color:#f4bd4a !important;
}
body.b2b-dashboard-page .b2b-account.is-signed-in:hover,
body.b2b-dashboard-page .b2b-account-menu[open] .b2b-account.is-signed-in{
border-color:rgba(246,198,89,.95) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.10),
0 0 0 1px rgba(246,198,89,.24),
0 12px 34px rgba(226,176,74,.22),
0 0 30px rgba(246,198,89,.26) !important;
}
body.b2b-dashboard-page .b2b-account:not(.is-signed-in){
min-height:46px;
padding:6px 14px 6px 8px;
border:1px solid rgba(226,176,74,.72);
border-radius:16px;
color:#fff;
background:linear-gradient(135deg,#061427 0%,#071c36 58%,#031020 100%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.07),
0 0 0 1px rgba(226,176,74,.15),
0 10px 30px rgba(226,176,74,.18),
0 0 22px rgba(226,176,74,.20);
transition:transform .18s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
body.b2b-dashboard-page .b2b-account:not(.is-signed-in):hover,
body.b2b-dashboard-page .b2b-account-menu[open] .b2b-account:not(.is-signed-in){
border-color:rgba(246,198,89,.95);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.10),
0 0 0 1px rgba(246,198,89,.24),
0 12px 34px rgba(226,176,74,.22),
0 0 30px rgba(246,198,89,.26);
}
body.b2b-dashboard-page .b2b-account:not(.is-signed-in):active{
transform:translateY(1px) scale(.99);
}
body.b2b-dashboard-page .b2b-account:not(.is-signed-in):focus-visible{
outline:3px solid rgba(246,198,89,.34);
outline-offset:3px;
}
body.b2b-dashboard-page .b2b-signin-avatar{
display:grid;
place-items:center;
width:34px;
height:34px;
border:1px solid rgba(246,198,89,.88);
border-radius:50%;
color:#f4bd4a;
background:radial-gradient(circle at 50% 40%,rgba(246,198,89,.16),rgba(6,22,46,.22) 68%,rgba(6,22,46,.42));
box-shadow:0 0 14px rgba(246,198,89,.20);
}
body.b2b-dashboard-page .b2b-signin-avatar i{
font-size:16px;
}
body.b2b-dashboard-page .b2b-customer-avatar{
border-color:rgba(246,198,89,.88);
color:#f4bd4a;
background:radial-gradient(circle at 50% 40%,rgba(246,198,89,.18),rgba(6,22,46,.26) 68%,rgba(6,22,46,.46));
}
body.b2b-dashboard-page .b2b-account:not(.is-signed-in) b{
color:#fff;
font-size:15px;
font-weight:950;
letter-spacing:.02em;
}
body.b2b-dashboard-page .b2b-account:not(.is-signed-in) .fa-chevron-down{
color:#f4bd4a !important;
font-size:12px;
}
body.b2b-dashboard-page .b2b-account-dropdown{
gap:8px !important;
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown{
width:340px;
padding:16px;
gap:10px !important;
border:1px solid rgba(226,176,74,.48);
border-radius:18px;
background:
radial-gradient(circle at 18% 0%,rgba(246,198,89,.16),transparent 34%),
linear-gradient(155deg,#061427 0%,#071d39 58%,#031020 100%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.06),
0 28px 70px rgba(1,10,20,.46),
0 0 32px rgba(226,176,74,.18);
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown::before{
content:"";
position:absolute;
right:54px;
top:-8px;
width:16px;
height:16px;
border-left:1px solid rgba(226,176,74,.48);
border-top:1px solid rgba(226,176,74,.48);
background:#071d39;
transform:rotate(45deg);
}
body.b2b-dashboard-page .b2b-account-welcome{
position:relative;
display:grid;
grid-template-columns:50px minmax(0,1fr);
gap:4px 12px;
align-items:center;
padding:8px 0 16px;
border-bottom:1px solid rgba(246,198,89,.18);
}
body.b2b-dashboard-page .b2b-account-welcome::before{
content:"\f007";
grid-row:1 / span 2;
display:grid;
place-items:center;
width:46px;
height:46px;
border:1px solid rgba(246,198,89,.72);
border-radius:15px;
color:#f4bd4a;
background:rgba(246,198,89,.08);
box-shadow:0 0 18px rgba(246,198,89,.18);
font-family:"Font Awesome 6 Free";
font-weight:900;
}
body.b2b-dashboard-page .b2b-account-welcome b{
color:#fff;
font-size:14px;
font-weight:950;
}
body.b2b-dashboard-page .b2b-account-welcome small{
color:rgba(255,255,255,.76);
font-size:12px;
font-weight:750;
}
body.b2b-dashboard-page .b2b-account-welcome b::after{
content:"";
display:inline-block;
width:4px;
height:4px;
margin-left:1px;
border-radius:50%;
background:#f4bd4a;
vertical-align:baseline;
}
body.b2b-dashboard-page .b2b-account-dropdown a,
body.b2b-dashboard-page .b2b-account-dropdown button{
width:100%;
display:grid;
grid-template-columns:34px minmax(0,1fr);
align-items:center;
gap:10px;
padding:10px 12px;
border:1px solid rgba(5,29,52,.08);
border-radius:14px;
background:#fff;
color:#071f3d;
font:inherit;
text-align:left;
text-decoration:none;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown a,
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown button{
grid-template-columns:42px minmax(0,1fr) 16px;
min-height:58px;
padding:10px 12px;
border-color:rgba(246,198,89,.16);
border-radius:14px;
color:#fff;
background:rgba(255,255,255,.035);
transition:background .2s ease, border-color .2s ease, transform .18s ease;
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown a::after,
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown button::after{
content:"\f105";
color:#f4bd4a;
font-family:"Font Awesome 6 Free";
font-weight:900;
font-size:12px;
}
body.b2b-dashboard-page .b2b-account-dropdown a:hover,
body.b2b-dashboard-page .b2b-account-dropdown button:hover{
border-color:rgba(205,160,69,.35);
background:#fbf8f0;
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown a:hover,
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown button:hover{
border-color:rgba(246,198,89,.40);
background:rgba(246,198,89,.09);
transform:translateY(-1px);
}
body.b2b-dashboard-page .b2b-account-dropdown i{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:11px;
background:#edf9f7;
color:#087b76;
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown i{
width:38px;
height:38px;
border:1px solid rgba(246,198,89,.44);
border-radius:13px;
color:#f4bd4a;
background:rgba(246,198,89,.07);
}
body.b2b-dashboard-page .b2b-account-dropdown span{
min-width:0;
display:grid;
gap:2px;
}
body.b2b-dashboard-page .b2b-account-dropdown b{
overflow:hidden;
color:#071f3d;
font-size:13px;
line-height:1.15;
text-overflow:ellipsis;
white-space:nowrap;
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown b{
color:#fff;
font-size:13px;
letter-spacing:.01em;
}
body.b2b-dashboard-page .b2b-account-dropdown small{
overflow:hidden;
color:#66788d;
font-size:11px;
line-height:1.2;
text-overflow:ellipsis;
white-space:nowrap;
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown small{
color:rgba(255,255,255,.68);
font-size:11px;
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown a[href*="wa.me"]{
grid-template-columns:1fr;
min-height:44px;
justify-items:center;
border-top:1px solid rgba(246,198,89,.15);
border-color:transparent;
background:transparent;
text-align:center;
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown a[href*="wa.me"] i,
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown a[href*="wa.me"] small,
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown a[href*="wa.me"]::after{
display:none;
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown a[href*="wa.me"] b{
color:#f4bd4a;
text-decoration:underline;
text-underline-offset:3px;
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown a[href*="wa.me"] b::before{
content:"Need help? ";
color:rgba(255,255,255,.76);
font-weight:800;
text-decoration:none;
}
body.b2b-dashboard-page .b2b-account-dropdown .b2b-account-signout{
border-color:rgba(165,38,38,.13);
background:#fff8f8;
}
body.b2b-dashboard-page .b2b-account-dropdown .b2b-account-signout i{
background:#ffecec;
color:#a52626;
}
@media (max-width:780px){
body.b2b-dashboard-page .b2b-account.is-signed-in span{
max-width:118px;
}
body.b2b-dashboard-page .b2b-account.is-signed-in b{
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-account.is-signed-in small{
font-size:9px !important;
}
body.b2b-dashboard-page .b2b-account-dropdown{
right:0 !important;
left:auto !important;
width:min(92vw, 330px) !important;
}
body.b2b-dashboard-page .b2b-account:not(.is-signed-in){
min-height:44px;
padding:5px 10px 5px 7px;
}
body.b2b-dashboard-page .b2b-account:not(.is-signed-in) b{
font-size:12px !important;
}
body.b2b-dashboard-page .b2b-signin-avatar{
width:31px;
height:31px;
}
body.b2b-dashboard-page .b2b-account-menu:not(:has(.b2b-account.is-signed-in)) .b2b-account-dropdown{
width:min(92vw, 330px) !important;
}
}
/* Global premium dropdown / accordion experience. */
:root{
--premium-navy:#06162e;
--premium-ink:#071b33;
--premium-gold:#d79b29;
--premium-gold-soft:#fff4de;
--premium-line:#dfe8f0;
--premium-shadow:0 18px 48px rgba(6,22,46,.12);
--premium-glow:0 0 0 1px rgba(215,155,41,.45),0 18px 54px rgba(215,155,41,.18);
}
.nav-dropdown-toggle{
transition:background .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
.nav-dropdown.open .nav-dropdown-toggle{
border-color:rgba(215,155,41,.45);
box-shadow:0 12px 34px rgba(6,22,46,.12), inset 0 0 0 1px rgba(215,155,41,.12);
}
.nav-dropdown-toggle i,
.premium-accordion-ready > summary i.fa-chevron-down,
.premium-accordion-ready > summary i.fa-angle-down{
transition:transform .28s cubic-bezier(.2,.85,.24,1), color .24s ease;
}
.nav-dropdown.open .nav-dropdown-toggle i,
.premium-accordion-ready[open] > summary i.fa-chevron-down,
.premium-accordion-ready[open] > summary i.fa-angle-down{
transform:rotate(180deg);
color:var(--premium-gold);
}
.nav-dropdown-menu{
overflow:hidden;
border:1px solid rgba(215,155,41,.22) !important;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,253,.98)) !important;
box-shadow:0 26px 70px rgba(6,22,46,.20) !important;
transform-origin:top center;
}
.nav-dropdown.open .nav-dropdown-menu{
animation:premiumDropdownOpen .32s cubic-bezier(.2,.85,.24,1) both;
}
.nav-dropdown-menu a{
border-radius:14px;
transition:background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible{
background:linear-gradient(135deg,#fffaf0,#f4fbff) !important;
box-shadow:inset 3px 0 0 var(--premium-gold),0 10px 24px rgba(6,22,46,.08);
transform:translateX(3px);
}
.premium-accordion-ready{
transition:border-color .24s ease, box-shadow .24s ease, background .24s ease;
}
.premium-accordion-ready > summary{
position:relative;
outline:0;
transition:background .24s ease, color .24s ease, box-shadow .24s ease;
}
.premium-accordion-ready > summary::-webkit-details-marker{
display:none;
}
.premium-accordion-ready > summary:focus-visible{
box-shadow:inset 0 0 0 3px rgba(11,66,135,.18);
}
.premium-accordion-ready[open]{
border-color:rgba(215,155,41,.55) !important;
box-shadow:var(--premium-glow) !important;
}
.premium-accordion-ready[open] > summary{
background:linear-gradient(135deg,#fff,#fff8ec) !important;
}
.premium-accordion-ready.is-premium-opening > *:not(summary){
animation:premiumAccordionReveal .34s cubic-bezier(.2,.85,.24,1) both;
}
.premium-accordion-ready.is-premium-closing{
box-shadow:0 10px 26px rgba(6,22,46,.08) !important;
}
.mobile-menu-group.premium-accordion-ready{
border:1px solid rgba(215,155,41,.20);
border-radius:16px;
background:rgba(255,255,255,.96);
box-shadow:0 12px 34px rgba(6,22,46,.08);
}
.mobile-menu-group.premium-accordion-ready > summary{
min-height:50px;
padding:0 14px;
color:var(--premium-ink);
font-weight:950;
}
.mobile-menu-group.premium-accordion-ready[open]{
background:#fff;
}
body.b2b-dashboard-page .b2b-account-menu.premium-accordion-ready[open] .b2b-account{
border-color:rgba(215,155,41,.38);
background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,248,236,.98));
}
body.b2b-dashboard-page .b2b-account-menu.premium-accordion-ready[open] .b2b-account:not(.is-signed-in){
border-color:rgba(246,198,89,.95) !important;
color:#fff !important;
background:linear-gradient(135deg,#061427 0%,#071c36 58%,#031020 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.10),
0 0 0 1px rgba(246,198,89,.24),
0 12px 34px rgba(226,176,74,.22),
0 0 30px rgba(246,198,89,.26) !important;
}
body.b2b-dashboard-page .b2b-request-accordion.premium-accordion-ready,
body.b2b-dashboard-page .b2b-compact-row.premium-accordion-ready{
border-color:#dfe8f0;
background:#fff;
}
body.b2b-dashboard-page .b2b-request-accordion.premium-accordion-ready[open],
body.b2b-dashboard-page .b2b-compact-row.premium-accordion-ready[open]{
border-color:rgba(215,155,41,.55) !important;
box-shadow:var(--premium-glow) !important;
}
body.b2b-dashboard-page .b2b-compact-row.premium-accordion-ready[open] summary{
border-bottom:1px solid rgba(215,155,41,.18);
}
body.b2b-dashboard-page .b2b-compact-row.premium-accordion-ready[open] .b2b-compact-icon,
body.b2b-dashboard-page .b2b-request-accordion.premium-accordion-ready[open] summary > span{
color:#8d5b00;
background:linear-gradient(135deg,#fff8ec,#fff);
box-shadow:inset 0 0 0 1px rgba(215,155,41,.22);
}
body.b2b-dashboard-page .b2b-compact-row.premium-accordion-ready[open] summary > strong{
color:#fff;
background:linear-gradient(135deg,#b8780b,#d79b29);
}
body.b2b-dashboard-page .b2b-compact-row-body{
animation-duration:.34s;
}
@keyframes premiumDropdownOpen{
0%{ opacity:0; transform:translateY(-8px) scale(.985); filter:blur(2px); }
100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes premiumAccordionReveal{
0%{ opacity:0; transform:translateY(-8px); }
100%{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
.nav-dropdown.open .nav-dropdown-menu,
.premium-accordion-ready.is-premium-opening > *:not(summary){
animation:none !important;
}
.nav-dropdown-toggle,
.nav-dropdown-menu a,
.premium-accordion-ready,
.premium-accordion-ready > summary,
.premium-accordion-ready > summary i{
transition:none !important;
}
}
/* Final quick, secure B2B registration journey. */
body.b2b-dashboard-page .b2b-access-modal{
padding:18px;
background:radial-gradient(circle at 20% 10%,rgba(11,46,82,.46),transparent 32%), rgba(1,10,20,.70) !important;
}
body.b2b-dashboard-page .b2b-access-card.b2b-quick-card{
width:min(100%,1080px) !important;
max-height:min(92vh,900px);
overflow:auto;
padding:0 !important;
border-radius:24px !important;
background:#fff;
border:1px solid rgba(255,255,255,.55);
box-shadow:0 36px 110px rgba(1,10,20,.42);
}
body.b2b-dashboard-page .b2b-access-modal.is-account-access .b2b-access-card.b2b-quick-card{
width:min(100%,720px) !important;
}
body.b2b-dashboard-page .b2b-access-modal.is-account-access .b2b-quick-steps{
grid-template-columns:repeat(3,minmax(0,1fr));
}
body.b2b-dashboard-page .b2b-access-modal.is-account-access .b2b-quick-stage{
width:min(100%,480px);
}
body.b2b-dashboard-page .b2b-access-modal.is-account-access .b2b-access-summary{
display:none !important;
}
body.b2b-dashboard-page .b2b-quick-head{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:center;
padding:18px 24px;
color:#fff;
background:linear-gradient(135deg,#06162e,#08254a 58%,#06162e);
}
body.b2b-dashboard-page .b2b-quick-brand{
display:grid;
grid-template-columns:40px auto;
column-gap:10px;
align-items:center;
}
body.b2b-dashboard-page .b2b-quick-brand i{
grid-row:1 / 3;
display:grid;
place-items:center;
width:40px;
height:40px;
border:2px solid #d79b29;
border-radius:12px;
color:#d79b29;
}
body.b2b-dashboard-page .b2b-quick-brand b{ color:#f4bd4a; font-size:22px; line-height:1; }
body.b2b-dashboard-page .b2b-quick-brand small{ color:rgba(255,255,255,.84); font-size:10px; font-weight:900; text-transform:uppercase; }
body.b2b-dashboard-page .b2b-quick-head > div{ display:flex; gap:10px; flex-wrap:wrap; }
body.b2b-dashboard-page .b2b-quick-head strong{ display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 12px; border:1px solid rgba(255,255,255,.18); border-radius:12px; color:#fff; background:rgba(255,255,255,.06); font-size:12px; }
body.b2b-dashboard-page .b2b-quick-head strong i{ color:#f4bd4a; }
body.b2b-dashboard-page .b2b-quick-steps{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:18px;
margin:0;
padding:22px 34px 16px;
list-style:none;
background:linear-gradient(180deg,#fff,#f8fbfd);
}
body.b2b-dashboard-page .b2b-quick-steps li{
position:relative;
display:grid;
grid-template-columns:42px minmax(0,1fr);
gap:10px;
align-items:center;
min-width:0;
}
body.b2b-dashboard-page .b2b-quick-steps li:not(:last-child)::after{
content:"";
position:absolute;
left:calc(100% + 2px);
top:21px;
width:16px;
border-top:2px dashed #d5dde6;
}
body.b2b-dashboard-page .b2b-quick-steps b{
display:grid;
place-items:center;
width:42px;
height:42px;
border-radius:50%;
color:#6f7f90;
background:#f5f7fa;
border:1px solid #e2e8ef;
font-size:16px;
font-weight:950;
}
body.b2b-dashboard-page .b2b-quick-steps .is-active b{ color:#fff; background:#0b4287; border-color:#0b4287; box-shadow:0 10px 24px rgba(11,66,135,.24); }
body.b2b-dashboard-page .b2b-quick-steps .is-complete b{ color:#fff; background:#b8780b; border-color:#b8780b; }
body.b2b-dashboard-page .b2b-quick-steps span{ display:block; color:#0a1e35; font-size:13px; font-weight:950; line-height:1.25; }
body.b2b-dashboard-page .b2b-quick-steps small{ display:block; margin-top:3px; color:#697b8e; font-size:11px; font-weight:750; }
body.b2b-dashboard-page .b2b-quick-stage{
width:min(100%,560px);
margin:8px auto 20px;
padding:22px;
border:1px solid #e0e7ef;
border-radius:18px;
background:#fff;
box-shadow:0 18px 60px rgba(8,31,58,.10);
}
body.b2b-dashboard-page .b2b-quick-stage > small{ color:#b8780b; font-size:11px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
body.b2b-dashboard-page .b2b-quick-stage h3{ margin:8px 0; color:#071b33; font-size:28px; letter-spacing:0; }
body.b2b-dashboard-page .b2b-quick-stage p{ color:#53687d; font-size:14px; font-weight:750; }
body.b2b-dashboard-page .b2b-stage-icon{
display:grid;
place-items:center;
width:76px;
height:76px;
margin:4px auto 12px;
border-radius:50%;
color:#0b2d58;
background:linear-gradient(135deg,#fff,#f7efe2);
border:1px solid #ead8bd;
font-size:30px;
}
body.b2b-dashboard-page .b2b-stage-warning{
color:#8d5b00;
background:#fff8ec;
border-color:#ead8bd;
}
body.b2b-dashboard-page .b2b-secondary-inline{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
border:0;
border-radius:12px;
color:#0b4287;
background:#eef6ff;
font-weight:950;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-account-empty{
display:grid;
gap:4px;
padding:13px;
border:1px solid #dfe8f0;
border-radius:14px;
background:#f8fbfd;
text-align:center;
}
body.b2b-dashboard-page .b2b-account-empty b{
overflow:hidden;
color:#071b33;
font-size:13px;
text-overflow:ellipsis;
}
body.b2b-dashboard-page .b2b-account-empty span{
color:#607488;
font-size:12px;
font-weight:800;
}
body.b2b-dashboard-page .b2b-quick-card .b2b-access-summary{ grid-template-columns:repeat(3,minmax(0,1fr)); margin:14px 0; }
body.b2b-dashboard-page .b2b-quick-card form{ display:grid; gap:13px; }
body.b2b-dashboard-page .b2b-quick-card label{ display:grid; gap:7px; color:#213d58; font-size:12px; font-weight:950; }
body.b2b-dashboard-page .b2b-quick-card input,
body.b2b-dashboard-page .b2b-quick-card select,
body.b2b-dashboard-page .b2b-quick-card textarea{ width:100%; min-height:48px; border:1px solid #d8e3ec; border-radius:12px; padding:0 13px; color:#071b33; background:#fff; font:inherit; font-weight:800; }
body.b2b-dashboard-page .b2b-quick-card textarea{ min-height:86px; padding:12px 13px; }
body.b2b-dashboard-page .b2b-quick-card button.primary{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:50px; border:0; border-radius:13px; color:#fff; background:linear-gradient(135deg,#06162e,#092c5a); font-weight:950; cursor:pointer; }
body.b2b-dashboard-page .b2b-quick-card button.primary:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(6,22,46,.18); }
body.b2b-dashboard-page .b2b-stage-note{ display:flex; align-items:flex-start; gap:10px; margin:0; padding:13px; border-radius:14px; color:#6b5421 !important; background:#fff8ec; font-size:12px !important; }
body.b2b-dashboard-page .b2b-stage-note i{ color:#c18718; }
body.b2b-dashboard-page .b2b-otp-input{ text-align:center; letter-spacing:.55em; font-size:22px !important; font-weight:950 !important; }
body.b2b-dashboard-page .b2b-otp-expiry{ display:flex; gap:7px; justify-content:center; color:#6a7b8d; font-size:12px; font-weight:850; }
body.b2b-dashboard-page .b2b-access-actions{ grid-template-columns:1fr auto auto; }
body.b2b-dashboard-page .b2b-new-customer-badge{ justify-self:start; padding:6px 10px; border-radius:999px; color:#8d5b00; background:#fff0d4; font-size:11px; font-weight:950; }
body.b2b-dashboard-page .b2b-phone-inline{ display:grid; grid-template-columns:92px minmax(0,1fr); gap:8px; }
body.b2b-dashboard-page .b2b-phone-inline button{ border:1px solid #d8e3ec; border-radius:12px; background:#fff; color:#071b33; font-weight:950; }
body.b2b-dashboard-page .b2b-final-review-card{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
body.b2b-dashboard-page .b2b-final-review-card article{ min-width:0; padding:12px; border:1px solid #dfe8f0; border-radius:13px; background:#fbfdff; }
body.b2b-dashboard-page .b2b-final-review-card small{ display:block; color:#6a7b8d; font-size:10px; font-weight:950; text-transform:uppercase; letter-spacing:.06em; }
body.b2b-dashboard-page .b2b-final-review-card b,
body.b2b-dashboard-page .b2b-final-review-card span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.b2b-dashboard-page .b2b-final-review-card b{ margin-top:5px; color:#071b33; font-size:13px; }
body.b2b-dashboard-page .b2b-final-review-card span{ margin-top:4px; color:#647688; font-size:12px; font-weight:800; }
body.b2b-dashboard-page .b2b-final-review-card em{ display:inline-flex; margin-left:6px; padding:3px 7px; border-radius:999px; color:#14814e; background:#e6f8ef; font-size:10px; font-style:normal; }
body.b2b-dashboard-page .b2b-success-state{ position:relative; display:grid; justify-items:center; gap:12px; padding:16px 8px 8px; text-align:center; }
body.b2b-dashboard-page .b2b-success-check{ display:grid; place-items:center; width:82px; height:82px; border-radius:50%; color:#fff; background:linear-gradient(135deg,#1bb66a,#0c8f55); box-shadow:0 18px 36px rgba(27,182,106,.25); animation:b2bSuccessPop .8s cubic-bezier(.2,1.2,.35,1) both; }
body.b2b-dashboard-page .b2b-success-check i{ font-size:34px; animation:b2bSuccessCheck .55s ease .28s both; }
body.b2b-dashboard-page .b2b-success-state h4{ margin:4px 0 0; color:#071b33; font-size:26px; }
body.b2b-dashboard-page .b2b-reference-card{ display:grid; grid-template-columns:minmax(0,1fr) 42px; gap:6px 10px; align-items:center; width:min(100%,360px); padding:13px; border:1px dashed #b7c9dd; border-radius:14px; background:#f7fbff; animation:b2bSuccessRise .65s ease .18s both; }
body.b2b-dashboard-page .b2b-reference-card small,
body.b2b-dashboard-page .b2b-reference-card b{ grid-column:1; }
body.b2b-dashboard-page .b2b-reference-card small{ color:#687c90; font-size:11px; font-weight:900; }
body.b2b-dashboard-page .b2b-reference-card b{ color:#0b4287; font-size:18px; }
body.b2b-dashboard-page .b2b-reference-card button{ grid-column:2; grid-row:1 / 3; width:42px; height:42px; border:1px solid #d8e3ec; border-radius:12px; color:#0b4287; background:#fff; cursor:pointer; }
body.b2b-dashboard-page .b2b-success-status{ padding:8px 12px; border-radius:999px; color:#8d5b00; background:#fff0d4; font-size:12px; font-weight:950; animation:b2bSuccessRise .65s ease .32s both; }
body.b2b-dashboard-page .b2b-success-note{ color:#617487; font-size:12px; font-weight:800; }
body.b2b-dashboard-page .b2b-success-burst span{ position:absolute; width:7px; height:7px; border-radius:2px; background:#c18718; animation:b2bSuccessSpark .9s ease .2s both; }
body.b2b-dashboard-page .b2b-success-burst span:nth-child(1){ left:28%; top:24%; }
body.b2b-dashboard-page .b2b-success-burst span:nth-child(2){ right:28%; top:27%; background:#0b4287; }
body.b2b-dashboard-page .b2b-success-burst span:nth-child(3){ left:36%; top:14%; transform:rotate(45deg); }
body.b2b-dashboard-page .b2b-success-burst span:nth-child(4){ right:36%; top:16%; background:#0b4287; transform:rotate(45deg); }
@keyframes b2bSuccessPop{ 0%{ opacity:0; transform:scale(.65); } 70%{ opacity:1; transform:scale(1.08); } 100%{ opacity:1; transform:scale(1); } }
@keyframes b2bSuccessCheck{ 0%{ opacity:0; transform:scale(.6) rotate(-12deg); } 100%{ opacity:1; transform:scale(1) rotate(0); } }
@keyframes b2bSuccessRise{ 0%{ opacity:0; transform:translateY(10px); } 100%{ opacity:1; transform:translateY(0); } }
@keyframes b2bSuccessSpark{ 0%{ opacity:0; transform:translateY(0) scale(.6) rotate(0); } 45%{ opacity:1; } 100%{ opacity:0; transform:translateY(-24px) scale(1) rotate(140deg); } }
@media (prefers-reduced-motion: reduce){
body.b2b-dashboard-page .b2b-success-check,
body.b2b-dashboard-page .b2b-success-check i,
body.b2b-dashboard-page .b2b-reference-card,
body.b2b-dashboard-page .b2b-success-status,
body.b2b-dashboard-page .b2b-success-burst span{ animation:none !important; }
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-access-modal{ padding:0; align-items:stretch; }
body.b2b-dashboard-page .b2b-access-card.b2b-quick-card{ width:100% !important; max-height:100vh; min-height:100vh; border-radius:0 !important; }
body.b2b-dashboard-page .b2b-quick-head{ grid-template-columns:1fr; gap:12px; padding:16px; }
body.b2b-dashboard-page .b2b-quick-head > div{ display:none; }
body.b2b-dashboard-page .b2b-quick-steps{ grid-template-columns:repeat(5,1fr); gap:6px; padding:14px 12px 8px; }
body.b2b-dashboard-page .b2b-access-modal.is-account-access .b2b-quick-steps{ grid-template-columns:repeat(3,1fr); }
body.b2b-dashboard-page .b2b-quick-steps li{ grid-template-columns:1fr; justify-items:center; gap:5px; text-align:center; }
body.b2b-dashboard-page .b2b-quick-steps li:not(:last-child)::after{ display:none; }
body.b2b-dashboard-page .b2b-quick-steps b{ width:34px; height:34px; font-size:13px; }
body.b2b-dashboard-page .b2b-quick-steps span{ font-size:10px; }
body.b2b-dashboard-page .b2b-quick-steps small{ display:none; }
body.b2b-dashboard-page .b2b-quick-stage{ width:auto; margin:10px 12px 14px; padding:16px; border-radius:16px; }
body.b2b-dashboard-page .b2b-quick-stage h3{ font-size:24px; }
body.b2b-dashboard-page .b2b-quick-card .b2b-access-summary,
body.b2b-dashboard-page .b2b-final-review-card,
body.b2b-dashboard-page .b2b-access-actions,
body.b2b-dashboard-page .b2b-success-actions{ grid-template-columns:1fr; }
body.b2b-dashboard-page .b2b-quick-trust{ grid-template-columns:1fr 1fr; padding:12px; }
}
/* Must stay last: compact View Details density overrides after legacy modal rules. */
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar{ min-height:48px !important; }
body.b2b-dashboard-page .b2b-compact-exec-banner{ margin:14px 30px 14px !important; padding:16px 22px !important; }
body.b2b-dashboard-page .b2b-compact-exec-banner h2{ margin:9px 0 5px !important; font-size:28px !important; }
body.b2b-dashboard-page .b2b-compact-exec-banner p{ font-size:14px !important; }
body.b2b-dashboard-page .b2b-compact-exec-banner aside b{ font-size:24px !important; }
body.b2b-dashboard-page .b2b-compact-exec-banner aside em{ font-size:12px !important; }
body.b2b-dashboard-page .b2b-compact-facts span{ min-height:62px !important; padding:7px 12px !important; }
body.b2b-dashboard-page .b2b-compact-facts b{ font-size:13px !important; }
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-progress{ margin:0 30px 10px !important; padding:12px 20px 14px !important; }
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-progress h3{ margin-bottom:8px !important; font-size:14px !important; }
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track i{ width:32px !important; height:32px !important; font-size:13px !important; }
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track b{ min-height:26px !important; font-size:9.7px !important; }
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track small{ font-size:9px !important; }
body.b2b-dashboard-page .b2b-compact-row summary{ min-height:52px !important; }
body.b2b-dashboard-page .b2b-compact-icon{ width:34px !important; height:34px !important; }
body.b2b-dashboard-page .b2b-compact-copy b{ font-size:15px !important; }
body.b2b-dashboard-page .b2b-compact-copy small{ font-size:13px !important; }
body.b2b-dashboard-page .b2b-compact-row summary > strong{ padding:8px 12px !important; font-size:12px !important; }
body.b2b-dashboard-page .b2b-compact-purchase{ margin:12px 0 14px !important; padding:14px 18px 18px !important; }
body.b2b-dashboard-page .b2b-compact-purchase header{ margin-bottom:12px !important; }
body.b2b-dashboard-page .b2b-compact-buy-card{ min-height:72px !important; padding:11px !important; }
body.b2b-dashboard-page .b2b-compact-buy-actions button{ min-height:50px !important; }
/* Final compact density pass for the owner-approved shipment detail reference. */
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar{
min-height:48px !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner{
margin:14px 30px 14px !important;
padding:16px 22px !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner h2{
margin:9px 0 5px !important;
font-size:28px !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner p{
font-size:14px !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner aside b{
font-size:24px !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner aside em{
font-size:12px !important;
}
body.b2b-dashboard-page .b2b-compact-facts span{
min-height:62px !important;
padding:7px 12px !important;
}
body.b2b-dashboard-page .b2b-compact-facts b{
font-size:13px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-progress{
margin:0 30px 10px !important;
padding:12px 20px 14px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-progress h3{
margin-bottom:8px !important;
font-size:14px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track i{
width:32px !important;
height:32px !important;
font-size:13px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track b{
min-height:26px !important;
font-size:9.7px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track small{
font-size:9px !important;
}
body.b2b-dashboard-page .b2b-compact-row summary{
min-height:52px !important;
}
body.b2b-dashboard-page .b2b-compact-icon{
width:34px !important;
height:34px !important;
}
body.b2b-dashboard-page .b2b-compact-copy b{
font-size:15px !important;
}
body.b2b-dashboard-page .b2b-compact-copy small{
font-size:13px !important;
}
body.b2b-dashboard-page .b2b-compact-row summary > strong{
padding:8px 12px !important;
font-size:12px !important;
}
body.b2b-dashboard-page .b2b-compact-purchase{
margin:12px 0 14px !important;
padding:14px 18px 18px !important;
}
body.b2b-dashboard-page .b2b-compact-purchase header{
margin-bottom:12px !important;
}
body.b2b-dashboard-page .b2b-compact-buy-card{
min-height:72px !important;
padding:11px !important;
}
body.b2b-dashboard-page .b2b-compact-buy-actions button{
min-height:50px !important;
}
/* Final compact premium shipment View Details redesign. */
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail.b2b-exec-detail{
max-width:1440px !important;
background:#f7f9fb !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner{
grid-template-columns:minmax(230px,.85fr) minmax(300px,1.15fr) minmax(420px,1.4fr) !important;
align-items:stretch !important;
margin:22px 30px !important;
padding:22px 24px !important;
border-radius:12px !important;
background:linear-gradient(135deg,#061326 0%,#061b33 58%,#071426 100%) !important;
box-shadow:0 14px 34px rgba(3,20,36,.18) !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner > div:first-child{
padding-right:22px;
border-right:1px solid rgba(255,255,255,.12);
}
body.b2b-dashboard-page .b2b-compact-exec-banner span{
min-height:25px !important;
padding:0 12px !important;
border:0 !important;
background:#137346 !important;
color:#fff !important;
font-size:11px !important;
letter-spacing:.02em !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner h2{
margin:12px 0 8px !important;
font-size:31px !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner p{
color:#fff !important;
font-size:16px !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner aside{
min-height:0 !important;
padding:0 24px !important;
border:0 !important;
border-right:1px solid rgba(255,255,255,.12) !important;
border-radius:0 !important;
background:transparent !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner aside small{
color:#d9a942 !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner aside b{
font-size:27px !important;
}
body.b2b-dashboard-page .b2b-compact-facts{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
align-items:center;
}
body.b2b-dashboard-page .b2b-compact-facts span{
display:grid !important;
grid-template-columns:28px minmax(0,1fr);
gap:3px 11px !important;
min-height:72px !important;
padding:8px 18px !important;
border-radius:0 !important;
border-left:1px solid rgba(255,255,255,.12) !important;
background:transparent !important;
}
body.b2b-dashboard-page .b2b-compact-facts i{
grid-row:1 / span 2;
color:#d9a942;
font-size:19px;
}
body.b2b-dashboard-page .b2b-compact-facts small{
color:#fff !important;
font-size:11px !important;
text-transform:uppercase;
font-weight:950;
}
body.b2b-dashboard-page .b2b-compact-facts b{
color:#fff;
font-size:15px;
line-height:1.2;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-progress{
margin:0 30px 10px !important;
padding:18px 24px 22px !important;
border:1px solid #dce3ea !important;
border-radius:11px !important;
background:#fff !important;
box-shadow:0 8px 24px rgba(6,27,51,.045) !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-progress h3{
margin:0 0 14px !important;
color:#071b33 !important;
font-size:17px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track{
grid-template-columns:repeat(10,minmax(80px,1fr)) !important;
gap:0 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track i{
width:38px !important;
height:38px !important;
background:#fff !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track b{
max-width:112px !important;
min-height:31px !important;
color:#071b33 !important;
font-size:11px !important;
line-height:1.15 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track small{
color:#566879 !important;
font-size:10px !important;
}
body.b2b-dashboard-page .b2b-compact-detail-stack{
display:grid;
gap:0;
padding:0 30px 26px;
}
body.b2b-dashboard-page .b2b-compact-row{
overflow:hidden;
border:1px solid #dce3ea;
border-bottom:0;
background:#fff;
}
body.b2b-dashboard-page .b2b-compact-row:first-child{ border-radius:12px 12px 0 0; }
body.b2b-dashboard-page .b2b-compact-row:last-of-type{ border-bottom:1px solid #dce3ea; border-radius:0 0 12px 12px; }
body.b2b-dashboard-page .b2b-compact-row summary{
display:grid;
grid-template-columns:45px minmax(0,1fr) auto 30px;
gap:16px;
align-items:center;
min-height:64px;
padding:0 22px;
list-style:none;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-compact-row summary::-webkit-details-marker{ display:none; }
body.b2b-dashboard-page .b2b-compact-icon{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:50%;
background:#f2f5f8;
color:#061b33;
}
body.b2b-dashboard-page .b2b-compact-copy{
display:flex;
align-items:baseline;
gap:18px;
min-width:0;
}
body.b2b-dashboard-page .b2b-compact-copy b{
color:#071b33;
font-size:17px;
font-weight:950;
white-space:nowrap;
}
body.b2b-dashboard-page .b2b-compact-copy small{
min-width:0;
color:#536477;
font-size:15px;
font-weight:750;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
body.b2b-dashboard-page .b2b-compact-row summary > strong{
min-width:138px;
padding:10px 16px;
border-radius:7px;
background:#fbf3e8;
color:#bc7c20;
text-align:center;
font-size:14px;
font-weight:950;
}
body.b2b-dashboard-page .b2b-compact-row summary > .fa-chevron-down{
color:#061b33;
transition:transform .22s ease;
}
body.b2b-dashboard-page .b2b-compact-row[open] summary > .fa-chevron-down{
transform:rotate(180deg);
}
body.b2b-dashboard-page .b2b-compact-row-body{
padding:0 22px 18px 83px;
border-top:1px solid #edf1f4;
}
body.b2b-dashboard-page .b2b-compact-products{
display:grid;
gap:10px;
padding-top:12px;
}
body.b2b-dashboard-page .b2b-manifest-head{
display:grid;
grid-template-columns:42px minmax(0,1fr) auto;
gap:12px;
align-items:center;
padding:10px 12px;
border:1px solid #dce7ef;
border-radius:12px;
background:linear-gradient(135deg,#f8fcff,#eef8f8);
}
body.b2b-dashboard-page .b2b-manifest-head > span{
display:grid;
place-items:center;
width:42px;
height:42px;
border-radius:12px;
color:#006d77;
background:#dff6f5;
}
body.b2b-dashboard-page .b2b-manifest-head b{
color:#071b33;
font-size:14px;
}
body.b2b-dashboard-page .b2b-manifest-head small{
color:#5d7083;
font-size:11px;
font-weight:800;
}
body.b2b-dashboard-page .b2b-manifest-head strong{
padding:7px 10px;
border-radius:999px;
color:#053047;
background:#fff;
border:1px solid #d7e3ec;
font-size:12px;
}
body.b2b-dashboard-page .b2b-compact-products article{
display:grid;
grid-template-columns:62px 64px minmax(0,1fr) repeat(2,minmax(92px,.2fr));
gap:10px;
align-items:center;
padding:8px 10px;
border:1px solid #e2e8ee;
border-radius:12px;
background:#fbfdff;
}
body.b2b-dashboard-page .b2b-product-line > em{
justify-self:start;
padding:7px 9px;
border-radius:999px;
background:#06213d;
color:#fff;
font-size:11px;
font-style:normal;
font-weight:900;
white-space:nowrap;
}
body.b2b-dashboard-page .b2b-compact-products img{
width:64px;
height:48px;
border-radius:10px;
object-fit:cover;
background:#eef3f7;
}
body.b2b-dashboard-page .b2b-compact-products b,
body.b2b-dashboard-page .b2b-compact-detail-list b{
color:#071b33;
}
body.b2b-dashboard-page .b2b-compact-products small,
body.b2b-dashboard-page .b2b-compact-detail-list small{
color:#647587;
font-size:12px;
font-weight:800;
}
body.b2b-dashboard-page .b2b-compact-products span,
body.b2b-dashboard-page .b2b-compact-detail-list span{
display:grid;
gap:3px;
}
body.b2b-dashboard-page .b2b-compact-detail-list{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
padding-top:16px;
}
body.b2b-dashboard-page .b2b-compact-detail-list span{
padding:12px;
border:1px solid #e2e8ee;
border-radius:10px;
background:#fbfdff;
}
body.b2b-dashboard-page .b2b-vip-route-card{
display:grid;
gap:10px;
padding:12px;
margin-top:12px;
border:1px solid #dce7ef;
border-radius:14px;
background:linear-gradient(135deg,#ffffff,#f3fbfb);
}
body.b2b-dashboard-page .b2b-vip-route-line{
display:grid;
grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);
align-items:center;
gap:10px;
}
body.b2b-dashboard-page .b2b-vip-route-line span{
min-height:54px;
padding:10px 12px;
border-radius:12px;
border:1px solid #dce7ef;
background:#fff;
}
body.b2b-dashboard-page .b2b-vip-route-line i{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:50%;
color:#fff;
background:#006d77;
}
body.b2b-dashboard-page .b2b-vip-route-card small{
display:block;
color:#65778a;
font-size:11px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}
body.b2b-dashboard-page .b2b-vip-route-card b{
display:block;
color:#071b33;
font-size:13px;
line-height:1.25;
}
body.b2b-dashboard-page .b2b-vip-route-meta{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
body.b2b-dashboard-page .b2b-vip-route-meta span{
min-height:50px;
padding:8px 10px;
border:1px solid #e2e8ee;
border-radius:10px;
background:#fff;
}
body.b2b-dashboard-page .b2b-vip-route-card p{
margin:0;
padding:8px 10px;
border-radius:10px;
color:#4d6276;
background:#eef8f8;
font-size:12px;
font-weight:800;
}
body.b2b-dashboard-page .b2b-compact-purchase{
margin:16px 0 !important;
padding:18px 22px 22px !important;
border:1px solid #d9a942 !important;
border-radius:12px !important;
background:linear-gradient(180deg,#fffaf2,#fff) !important;
box-shadow:0 10px 28px rgba(126,84,17,.08) !important;
}
body.b2b-dashboard-page .b2b-compact-purchase header{
display:grid;
grid-template-columns:52px minmax(0,1fr) auto;
gap:16px;
align-items:center;
margin-bottom:16px;
}
body.b2b-dashboard-page .b2b-compact-purchase header > span{
display:grid;
place-items:center;
width:48px;
height:48px;
border-radius:50%;
background:#fff5e5;
color:#c58b2b;
font-size:23px;
}
body.b2b-dashboard-page .b2b-compact-purchase h3{
margin:0 0 4px;
color:#071b33;
font-size:19px;
}
body.b2b-dashboard-page .b2b-compact-purchase p{
margin:0;
color:#607184;
font-size:13px;
font-weight:750;
}
body.b2b-dashboard-page .b2b-compact-purchase header > strong{
padding:11px 18px;
border-radius:8px;
background:#fff5e5;
color:#bc7c20;
}
body.b2b-dashboard-page .b2b-compact-buy-row{
display:grid;
grid-template-columns:minmax(270px,.9fr) minmax(270px,.9fr) minmax(290px,.95fr);
gap:14px;
}
body.b2b-dashboard-page .b2b-compact-buy-card{
display:grid;
grid-template-columns:46px minmax(0,1fr) auto;
gap:14px;
align-items:center;
min-height:84px;
padding:14px;
border:1px solid #dce3ea;
border-radius:9px;
background:#fff;
}
body.b2b-dashboard-page .b2b-compact-buy-card.is-selected{
border-color:#cfd9e3;
}
body.b2b-dashboard-page .b2b-compact-buy-card > span{
display:grid;
place-items:center;
width:42px;
height:42px;
border-radius:50%;
background:#071b33;
color:#fff;
}
body.b2b-dashboard-page .b2b-compact-buy-card:nth-child(2) > span{
background:#fff4db;
color:#c58b2b;
}
body.b2b-dashboard-page .b2b-compact-buy-card b{
display:block;
color:#071b33;
font-size:16px;
}
body.b2b-dashboard-page .b2b-compact-buy-card em{
margin-left:6px;
padding:3px 7px;
border-radius:4px;
background:#071b33;
color:#fff;
font-size:9px;
font-style:normal;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-compact-buy-card:nth-child(2) em{
background:#d4a13e;
}
body.b2b-dashboard-page .b2b-compact-buy-card small{
display:block;
margin-top:4px;
color:#647587;
font-size:12px;
font-weight:750;
}
body.b2b-dashboard-page .b2b-compact-buy-card > strong{
color:#071b33;
text-align:right;
}
body.b2b-dashboard-page .b2b-compact-buy-card > strong small{
color:#15914e;
}
body.b2b-dashboard-page .b2b-compact-buy-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
body.b2b-dashboard-page .b2b-compact-buy-actions button{
min-height:58px;
border:1px solid #d7a245;
border-radius:9px;
background:#fff;
color:#bc7c20;
font-weight:950;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-compact-buy-actions button.primary{
border-color:#071b33;
background:#071b33;
color:#fff;
}
body.b2b-dashboard-page .b2b-compact-buy-actions button i{
margin-right:8px;
}
body.b2b-dashboard-page .b2b-compact-trust{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0;
padding:20px 28px;
border:1px solid #dce3ea;
border-radius:12px;
background:#fff;
}
body.b2b-dashboard-page .b2b-compact-trust span{
display:grid;
grid-template-columns:44px minmax(0,1fr);
gap:14px;
align-items:center;
padding:0 24px;
border-right:1px solid #edf1f4;
}
body.b2b-dashboard-page .b2b-compact-trust span:last-child{ border-right:0; }
body.b2b-dashboard-page .b2b-compact-trust i{
grid-row:1 / span 2;
color:#9aa8b4;
font-size:32px;
}
body.b2b-dashboard-page .b2b-compact-trust b{
color:#071b33;
font-size:16px;
}
body.b2b-dashboard-page .b2b-compact-trust small{
color:#607184;
font-size:13px;
font-weight:750;
}
@media (max-width:1180px){
body.b2b-dashboard-page .b2b-compact-exec-banner{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner > div:first-child,
body.b2b-dashboard-page .b2b-compact-exec-banner aside{
border-right:0 !important;
padding-right:0 !important;
padding-left:0 !important;
}
body.b2b-dashboard-page .b2b-compact-facts{
grid-template-columns:repeat(2,minmax(0,1fr));
}
body.b2b-dashboard-page .b2b-compact-buy-row{
grid-template-columns:1fr;
}
}
@media (max-width:620px){
body.b2b-dashboard-page .b2b-compact-exec-banner{
margin:10px 12px !important;
padding:15px !important;
}
body.b2b-dashboard-page .b2b-compact-exec-banner h2{
font-size:26px !important;
}
body.b2b-dashboard-page .b2b-compact-facts{
grid-template-columns:repeat(2,minmax(0,1fr));
}
body.b2b-dashboard-page .b2b-compact-facts span{
min-height:62px !important;
padding:8px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-progress{
margin:0 12px 10px !important;
overflow-x:auto !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track{
min-width:780px !important;
grid-template-columns:repeat(10,minmax(78px,1fr)) !important;
}
body.b2b-dashboard-page .b2b-compact-detail-stack{
padding:0 12px 20px;
}
body.b2b-dashboard-page .b2b-compact-row summary{
grid-template-columns:38px minmax(0,1fr) 96px 20px;
gap:10px;
min-height:60px;
padding:0 12px;
}
body.b2b-dashboard-page .b2b-compact-copy{
display:grid;
gap:2px;
}
body.b2b-dashboard-page .b2b-compact-copy b{
font-size:14px;
}
body.b2b-dashboard-page .b2b-compact-copy small{
font-size:11px;
}
body.b2b-dashboard-page .b2b-compact-row summary > strong{
min-width:0;
padding:8px 7px;
font-size:10px;
}
body.b2b-dashboard-page .b2b-compact-row-body{
padding:0 12px 14px;
}
body.b2b-dashboard-page .b2b-compact-products article,
body.b2b-dashboard-page .b2b-compact-detail-list{
grid-template-columns:1fr;
}
body.b2b-dashboard-page .b2b-compact-purchase{
padding:14px 12px !important;
}
body.b2b-dashboard-page .b2b-compact-purchase header{
grid-template-columns:42px minmax(0,1fr);
}
body.b2b-dashboard-page .b2b-compact-purchase header > strong{
grid-column:1 / -1;
}
body.b2b-dashboard-page .b2b-compact-buy-row,
body.b2b-dashboard-page .b2b-compact-buy-actions,
body.b2b-dashboard-page .b2b-compact-trust{
grid-template-columns:1fr;
}
body.b2b-dashboard-page .b2b-compact-trust{
padding:12px;
}
body.b2b-dashboard-page .b2b-compact-trust span{
padding:12px 0;
border-right:0;
border-bottom:1px solid #edf1f4;
}
body.b2b-dashboard-page .b2b-compact-trust span:last-child{
border-bottom:0;
}
}
/* Premium B2B request screen from approved owner reference */
body.b2b-dashboard-page .b2b-premium-request{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:22px;
align-items:start;
margin-top:28px;
padding:28px 30px 18px;
border:1px solid #dce6ee;
border-radius:18px;
background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
box-shadow:0 20px 70px rgba(8,31,54,.08);
}
body.b2b-dashboard-page .b2b-premium-request[hidden]{
display:none !important;
}
body.b2b-dashboard-page.b2b-request-open{
overflow:hidden;
}
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell{
position:fixed;
inset:0;
z-index:10020;
display:block;
margin:0;
padding:28px;
overflow:auto;
border:0;
border-radius:0;
background:rgba(3,20,36,.66);
box-shadow:none;
}
body.b2b-dashboard-page .b2b-request-backdrop{
position:fixed;
inset:0;
background:rgba(3,20,36,.62);
backdrop-filter:blur(8px);
}
body.b2b-dashboard-page .b2b-request-shell-panel{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,860px);
gap:22px;
align-items:start;
justify-content:center;
width:min(980px,100%);
margin:0 auto;
padding:28px 30px 18px;
border:1px solid #dce6ee;
border-radius:18px;
background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
box-shadow:0 28px 90px rgba(3,20,36,.34);
}
body.b2b-dashboard-page .b2b-request-close{
position:absolute;
top:16px;
right:16px;
z-index:2;
display:grid;
place-items:center;
width:38px;
height:38px;
border:1px solid #d9e3ec;
border-radius:50%;
background:#fff;
color:#071b33;
cursor:pointer;
box-shadow:0 10px 24px rgba(8,31,54,.12);
}
body.b2b-dashboard-page .b2b-request-main{ min-width:0; width:100%; }
body.b2b-dashboard-page .b2b-request-hero{
display:grid;
grid-template-columns:minmax(270px,420px) minmax(320px,1fr);
gap:28px;
align-items:start;
margin-bottom:18px;
}
body.b2b-dashboard-page .b2b-request-hero h2{
margin:0 0 12px;
color:#061832;
font-family:"Space Grotesk",Inter,sans-serif;
font-size:clamp(30px,3vw,40px);
line-height:1.04;
letter-spacing:0;
}
body.b2b-dashboard-page .b2b-request-hero p{
max-width:360px;
margin:0;
color:#455d71;
font-size:15px;
line-height:1.55;
font-weight:650;
}
body.b2b-dashboard-page .b2b-request-badges{
display:flex;
align-items:center;
gap:8px;
margin-bottom:14px !important;
color:#576d7e !important;
}
body.b2b-dashboard-page .b2b-request-badges i{ color:#c58b2b; }
body.b2b-dashboard-page .b2b-request-steps{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0;
margin:24px 0 0;
padding:0;
list-style:none;
}
body.b2b-dashboard-page .b2b-request-steps li{
position:relative;
display:grid;
justify-items:center;
gap:8px;
color:#607286;
font-size:12px;
font-weight:850;
}
body.b2b-dashboard-page .b2b-request-steps li::before{
content:"";
position:absolute;
top:16px;
left:0;
right:0;
height:1px;
background:#d8b16c;
opacity:.55;
z-index:0;
}
body.b2b-dashboard-page .b2b-request-steps li:first-child::before{ left:50%; }
body.b2b-dashboard-page .b2b-request-steps li:last-child::before{ right:50%; }
body.b2b-dashboard-page .b2b-request-steps b{
position:relative;
z-index:1;
display:grid;
place-items:center;
width:34px;
height:34px;
border:1px solid #d8dfe7;
border-radius:50%;
background:#fff;
color:#071b33;
box-shadow:0 8px 22px rgba(8,31,54,.08);
}
body.b2b-dashboard-page .b2b-request-steps .is-active b,
body.b2b-dashboard-page .b2b-request-steps .is-complete b{
border-color:#c58b2b;
background:#071b33;
color:#fff;
}
body.b2b-dashboard-page .b2b-premium-form{
display:grid;
gap:12px;
padding:0;
border:0;
background:transparent;
box-shadow:none;
}
body.b2b-dashboard-page .b2b-request-accordion{
overflow:hidden;
border:1px solid #dbe5ec;
border-radius:16px;
background:#fff;
box-shadow:0 12px 36px rgba(8,31,54,.055);
}
body.b2b-dashboard-page .b2b-request-accordion summary{
display:flex;
align-items:center;
gap:13px;
min-height:58px;
padding:0 18px;
cursor:pointer;
list-style:none;
}
body.b2b-dashboard-page .b2b-request-accordion summary::-webkit-details-marker{ display:none; }
body.b2b-dashboard-page .b2b-request-accordion summary > span{
display:grid;
place-items:center;
width:30px;
height:30px;
border-radius:10px;
color:#0a2b57;
background:#eef5ff;
}
body.b2b-dashboard-page .b2b-request-accordion summary b{
flex:1;
min-width:0;
color:#071b33;
font-size:18px;
line-height:1.2;
}
body.b2b-dashboard-page .b2b-request-accordion summary em{
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 12px;
border-radius:999px;
background:#f7fafc;
color:#3d5367;
font-size:11px;
font-style:normal;
font-weight:850;
}
body.b2b-dashboard-page .b2b-request-accordion summary em.is-green{
background:#e9f9ec;
color:#228241;
}
body.b2b-dashboard-page .b2b-premium-fields{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px 22px;
padding:0 18px 18px;
}
body.b2b-dashboard-page .b2b-premium-fields label{
display:grid;
gap:8px;
min-width:0;
color:#0d263f;
font-size:12px;
font-weight:850;
}
body.b2b-dashboard-page .b2b-premium-fields label.full,
body.b2b-dashboard-page .b2b-premium-fields .full{ grid-column:1 / -1; }
body.b2b-dashboard-page .b2b-premium-fields sup{
color:#d34235;
font-size:12px;
}
body.b2b-dashboard-page .b2b-premium-fields label > small{
justify-self:start;
margin-left:6px;
padding:3px 8px;
border-radius:999px;
background:#eef2f6;
color:#627487;
font-size:10px;
font-weight:850;
}
body.b2b-dashboard-page .b2b-premium-fields label > span{
display:flex;
align-items:center;
gap:10px;
min-height:42px;
padding:0 12px;
border:1px solid #d8e2eb;
border-radius:10px;
background:#fff;
color:#7b8a9b;
}
body.b2b-dashboard-page .b2b-premium-fields input,
body.b2b-dashboard-page .b2b-premium-fields select{
width:100%;
min-width:0;
min-height:40px;
border:0 !important;
outline:0;
padding:0;
background:transparent !important;
color:#071b33 !important;
font:inherit;
font-weight:760;
box-shadow:none !important;
}
body.b2b-dashboard-page .b2b-premium-fields select{ cursor:pointer; }
body.b2b-dashboard-page .b2b-phone-wrap button{
display:inline-flex;
align-items:center;
gap:7px;
align-self:stretch;
margin-left:-8px;
padding:0 10px;
border:0;
border-right:1px solid #d8e2eb;
background:#f8fafc;
color:#071b33;
font-weight:850;
}
body.b2b-dashboard-page .b2b-premium-fields strong{
flex:0 0 auto;
color:#465e73;
font-size:12px;
font-weight:850;
}
body.b2b-dashboard-page .b2b-privacy-line{
grid-column:1 / -1;
display:inline-flex;
align-items:center;
gap:8px;
justify-self:start;
margin:0;
padding:8px 12px;
border-radius:10px;
background:#fff7e9;
color:#536678;
font-size:12px;
font-weight:800;
}
body.b2b-dashboard-page .b2b-privacy-line i{ color:#c58b2b; }
body.b2b-dashboard-page .b2b-premium-shipment{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 12px;
}
body.b2b-dashboard-page .b2b-premium-shipment label > span{
background:#f9fbfd;
}
body.b2b-dashboard-page .b2b-request-message{
position:relative;
padding:14px 18px 12px;
border:1px solid #dbe5ec;
border-radius:16px;
background:#fff;
box-shadow:0 10px 30px rgba(8,31,54,.045);
}
body.b2b-dashboard-page .b2b-request-message label{
display:flex;
gap:9px;
align-items:center;
margin-bottom:8px;
color:#071b33;
font-size:13px;
font-weight:900;
}
body.b2b-dashboard-page .b2b-request-message label i{ color:#0a2b57; }
body.b2b-dashboard-page .b2b-request-message label small{ color:#6a7b89; font-weight:800; }
body.b2b-dashboard-page .b2b-request-message textarea{
width:100%;
min-height:54px;
resize:vertical;
padding:12px 14px 22px;
border:1px solid #d8e2eb;
border-radius:10px;
outline:0;
color:#071b33;
font:inherit;
font-weight:700;
}
body.b2b-dashboard-page .b2b-request-message > small{
position:absolute;
right:32px;
bottom:19px;
color:#6c7d8b;
font-size:11px;
font-weight:850;
}
body.b2b-dashboard-page .b2b-premium-consent{
display:flex;
gap:9px;
align-items:flex-start;
color:#586b7a;
font-size:12px;
font-weight:760;
}
body.b2b-dashboard-page .b2b-premium-consent input{ margin-top:2px; accent-color:#c58b2b; }
body.b2b-dashboard-page .b2b-request-summary-card{
position:sticky;
top:88px;
overflow:hidden;
border:1px solid #d9e2ea;
border-radius:16px;
background:#fff;
box-shadow:0 20px 60px rgba(8,31,54,.16);
}
body.b2b-dashboard-page .b2b-request-summary-card header{
display:flex;
align-items:center;
gap:11px;
min-height:54px;
padding:0 16px;
background:#071b33;
color:#fff;
font-size:16px;
font-weight:950;
}
body.b2b-dashboard-page .b2b-request-summary-card header i{
display:grid;
place-items:center;
width:30px;
height:30px;
border-radius:10px;
background:rgba(255,255,255,.09);
color:#d6a744;
}
body.b2b-dashboard-page .b2b-request-summary-card figure{
position:relative;
margin:0;
height:148px;
overflow:hidden;
background:#eef4f8;
}
body.b2b-dashboard-page .b2b-request-summary-card figure img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
body.b2b-dashboard-page .b2b-request-summary-card figcaption{
position:absolute;
right:12px;
bottom:10px;
padding:6px 10px;
border-radius:999px;
background:#071b33;
color:#fff;
font-size:11px;
font-weight:900;
box-shadow:0 8px 22px rgba(0,0,0,.2);
}
body.b2b-dashboard-page .b2b-summary-list{
display:grid;
gap:14px;
padding:18px 18px 12px;
}
body.b2b-dashboard-page .b2b-summary-list span{
display:grid;
grid-template-columns:22px 1fr;
column-gap:12px;
align-items:start;
}
body.b2b-dashboard-page .b2b-summary-list i{
grid-row:1 / span 3;
color:#071b33;
margin-top:2px;
}
body.b2b-dashboard-page .b2b-summary-list small{
color:#657687;
font-size:12px;
font-weight:850;
}
body.b2b-dashboard-page .b2b-summary-list b{
color:#061832;
font-size:14px;
font-weight:950;
line-height:1.25;
}
body.b2b-dashboard-page .b2b-summary-list em{
color:#5b7181;
font-size:12px;
font-style:normal;
font-weight:750;
}
body.b2b-dashboard-page .b2b-secure-box{
display:grid;
grid-template-columns:34px 1fr;
gap:10px;
margin:8px 16px 12px;
padding:13px;
border:1px solid #ead7b8;
border-radius:13px;
background:#fff7eb;
color:#6b4b14;
}
body.b2b-dashboard-page .b2b-secure-box i{
grid-row:1 / span 2;
display:grid;
place-items:center;
width:32px;
height:32px;
border-radius:10px;
color:#bf831d;
background:#fff;
}
body.b2b-dashboard-page .b2b-secure-box b{ color:#071b33; font-size:13px; }
body.b2b-dashboard-page .b2b-secure-box small{ color:#526879; font-size:12px; font-weight:750; line-height:1.35; }
body.b2b-dashboard-page .b2b-review-submit{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
width:calc(100% - 32px);
min-height:50px;
margin:0 16px 12px;
border:0;
border-radius:11px;
background:linear-gradient(135deg,#d8a440,#af7620);
color:#fff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 12px 28px rgba(175,118,32,.26);
}
body.b2b-dashboard-page .b2b-review-submit-inline{
width:100%;
margin:4px 0 0;
}
body.b2b-dashboard-page .b2b-review-submit:disabled{ opacity:.55; cursor:not-allowed; }
body.b2b-dashboard-page .b2b-request-summary-card > p{
margin:0 18px 18px;
color:#5f7180;
text-align:center;
font-size:11px;
line-height:1.45;
}
body.b2b-dashboard-page .b2b-request-summary-card a{ color:#0a2b57; font-weight:900; }
body.b2b-dashboard-page .b2b-request-trust-strip{
grid-column:1 / -1;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-top:4px;
padding:12px 16px;
border:1px solid #eadfce;
border-radius:14px;
background:linear-gradient(180deg,#fff,#fffaf2);
}
body.b2b-dashboard-page .b2b-request-trust-strip span{
display:grid;
grid-template-columns:30px 1fr;
column-gap:10px;
align-items:center;
}
body.b2b-dashboard-page .b2b-request-trust-strip i{
grid-row:1 / span 2;
color:#0a2b57;
font-size:20px;
}
body.b2b-dashboard-page .b2b-request-trust-strip b{
color:#071b33;
font-size:13px;
font-weight:950;
}
body.b2b-dashboard-page .b2b-request-trust-strip small{
color:#657687;
font-size:11px;
font-weight:750;
}
body.b2b-dashboard-page .b2b-premium-request .form-status{
margin:0;
color:#0a7d44;
font-weight:850;
}
@media (max-width:1180px){
body.b2b-dashboard-page .b2b-premium-request{ grid-template-columns:1fr; }
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell{ grid-template-columns:1fr; }
body.b2b-dashboard-page .b2b-request-shell-panel{ grid-template-columns:1fr; }
body.b2b-dashboard-page .b2b-request-summary-card{ position:relative; top:auto; max-width:430px; }
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-premium-request{
margin:18px -10px 0;
padding:18px 12px calc(90px + env(safe-area-inset-bottom));
border-radius:0;
border-left:0;
border-right:0;
box-shadow:none;
}
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell{
margin:0;
padding:0;
background:rgba(3,20,36,.72);
}
body.b2b-dashboard-page .b2b-request-shell-panel{
width:100%;
min-height:100dvh;
margin:0;
padding:62px 12px calc(92px + env(safe-area-inset-bottom));
border:0;
border-radius:0;
box-shadow:none;
}
body.b2b-dashboard-page .b2b-request-close{
position:fixed;
top:12px;
right:12px;
}
body.b2b-dashboard-page .b2b-request-hero{ grid-template-columns:1fr; gap:14px; }
body.b2b-dashboard-page .b2b-request-hero h2{ font-size:28px; }
body.b2b-dashboard-page .b2b-request-steps{ margin-top:4px; }
body.b2b-dashboard-page .b2b-request-steps li span{ font-size:10px; }
body.b2b-dashboard-page .b2b-premium-fields,
body.b2b-dashboard-page .b2b-premium-shipment{ grid-template-columns:1fr; padding:0 12px 14px; }
body.b2b-dashboard-page .b2b-request-accordion summary{ padding:0 12px; min-height:54px; }
body.b2b-dashboard-page .b2b-request-accordion summary b{ font-size:15px; }
body.b2b-dashboard-page .b2b-request-accordion summary em{ display:none; }
body.b2b-dashboard-page .b2b-request-summary-card{
max-width:none;
border-radius:15px;
}
body.b2b-dashboard-page .b2b-request-summary-card figure{ height:132px; }
body.b2b-dashboard-page .b2b-request-trust-strip{ grid-template-columns:1fr 1fr; padding:12px; }
}
/* Final mobile guard for the executive View Details header. */
@media (max-width:760px){
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail.b2b-exec-detail .b2b-lux-topbar{
min-height:52px !important;
padding:0 54px 0 14px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail.b2b-exec-detail .b2b-lux-topbar nav{
display:none !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail.b2b-exec-detail .b2b-lux-topbar a{
font-size:13px !important;
line-height:1 !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail.b2b-exec-detail .b2b-modal-close{
position:fixed !important;
top:9px !important;
right:10px !important;
z-index:80 !important;
width:36px !important;
height:36px !important;
border-radius:50% !important;
background:#ffffff !important;
color:#061b33 !important;
box-shadow:0 8px 22px rgba(6,27,51,.14) !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail.b2b-exec-detail .b2b-exec-banner{
margin-top:10px !important;
}
}
/* Mobile shipment-card tracking rail bug fix: target the real span items so labels cannot be clipped. */
@media (max-width:620px){
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
height:94px !important;
max-height:none !important;
min-height:94px !important;
padding:8px 9px 7px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail{
width:100% !important;
min-width:100% !important;
min-height:78px !important;
grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
gap:0 !important;
align-items:start !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail::before,
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail::after{
top:16px !important;
left:7% !important;
right:7% !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail::after{
width:calc(86% * var(--track-progress) / 100) !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail > span{
display:grid !important;
min-width:0 !important;
justify-items:center !important;
align-content:start !important;
gap:4px !important;
text-align:center !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail > span:nth-child(n+8){
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail > span > i{
width:30px !important;
height:30px !important;
border-width:2px !important;
font-size:12px !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail > span > b{
display:block !important;
width:100% !important;
max-width:52px !important;
min-height:27px !important;
overflow:visible !important;
color:#102438 !important;
font-size:8px !important;
line-height:1.08 !important;
font-weight:1000 !important;
white-space:normal !important;
text-wrap:balance !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail > span.is-done > b{
color:#14834d !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail > span.is-current > b{
color:#087bd0 !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail > span > small,
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-current-status{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock{
min-height:58px !important;
}
}
@media (max-width:370px){
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
height:90px !important;
min-height:90px !important;
padding-left:7px !important;
padding-right:7px !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail > span > i{
width:27px !important;
height:27px !important;
font-size:10px !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail > span > b{
max-width:46px !important;
font-size:7.2px !important;
line-height:1.05 !important;
}
}
/* Executive shipment detail redesign: cleaner customer View Details experience. */
body.b2b-dashboard-page .b2b-exec-detail{
max-width:1420px;
border:1px solid rgba(7,27,51,.12);
background:#f4f8fb;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar{
position:sticky;
top:0;
z-index:9;
min-height:54px;
padding:0 22px;
border-bottom:1px solid #d9e5ed;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar nav{
margin-right:48px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar button{
min-width:104px;
min-height:34px;
border-radius:8px;
font-size:12px;
}
body.b2b-dashboard-page .b2b-exec-banner{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,360px);
gap:20px;
margin:18px 22px 0;
padding:22px;
border:1px solid rgba(9,118,145,.2);
border-radius:14px;
background:
linear-gradient(135deg, rgba(4,26,49,.96), rgba(7,61,94,.93)),
radial-gradient(circle at 82% 20%, rgba(11,159,175,.22), transparent 32%);
color:#ffffff;
box-shadow:0 20px 50px rgba(6,27,51,.16);
}
body.b2b-dashboard-page .b2b-exec-banner span{
display:inline-flex;
align-items:center;
gap:8px;
min-height:28px;
padding:0 10px;
border:1px solid rgba(255,255,255,.2);
border-radius:999px;
background:rgba(255,255,255,.1);
color:#bff7ff;
font-size:11px;
font-weight:1000;
letter-spacing:.05em;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-exec-banner h2{
margin:13px 0 7px;
color:#ffffff;
font-size:36px;
line-height:1.02;
letter-spacing:0;
}
body.b2b-dashboard-page .b2b-exec-banner p{
margin:0;
color:rgba(255,255,255,.82);
font-size:17px;
font-weight:850;
}
body.b2b-dashboard-page .b2b-exec-banner aside{
display:grid;
align-content:center;
gap:6px;
min-height:126px;
padding:16px;
border:1px solid rgba(255,255,255,.18);
border-radius:12px;
background:rgba(255,255,255,.1);
}
body.b2b-dashboard-page .b2b-exec-banner aside small{
color:#bff7ff;
font-size:10px;
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-exec-banner aside b{
color:#ffffff;
font-size:22px;
line-height:1.1;
}
body.b2b-dashboard-page .b2b-exec-banner aside em{
color:rgba(255,255,255,.78);
font-size:12px;
font-style:normal;
font-weight:800;
line-height:1.35;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-hero{
grid-template-columns:minmax(300px,400px) minmax(0,1fr) minmax(260px,320px);
gap:16px;
padding:16px 22px 14px;
background:transparent;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-hero figure{
min-height:250px;
border-radius:14px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-hero-main{
align-content:stretch;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-titleline,
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-hero-main > p,
body.b2b-dashboard-page .b2b-exec-detail .b2b-current-strip{
display:none;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-facts{
height:100%;
grid-template-columns:repeat(2,minmax(0,1fr));
align-content:stretch;
border-radius:14px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-facts span{
min-height:76px;
border-right:1px solid #e0e9f0;
border-bottom:1px solid #e0e9f0;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-facts span:nth-child(2n){
border-right:0;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-update-card,
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-panel,
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-summary-card,
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-progress,
body.b2b-dashboard-page .b2b-exec-detail .b2b-commercial-products{
border-radius:14px;
box-shadow:0 14px 34px rgba(6,27,51,.07);
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-progress{
margin:0 22px 14px;
padding:14px 16px 16px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track{
grid-template-columns:repeat(10,minmax(78px,1fr));
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track i{
width:34px;
height:34px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-grid{
grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);
gap:14px;
padding:0 22px 14px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-summary-card{
grid-column:2;
grid-row:1 / span 2;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-photo-gallery{
grid-template-columns:minmax(0,1fr) 132px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-photo-gallery figure img{
height:168px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-photo-gallery > div img,
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-photo-gallery button{
height:80px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-commercial{
padding:0 22px 14px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-approved-option-grid{
gap:10px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-approved-option{
min-height:74px;
padding:11px 12px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-approved-main-grid{
gap:10px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-login-note{
border-radius:0 0 14px 14px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-technical,
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-activity{
margin:0 22px 14px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-trust-strip{
padding:15px 22px;
}
@media (max-width:1100px){
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-hero{
grid-template-columns:minmax(280px,.72fr) minmax(0,1fr);
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-update-card{
grid-column:1 / -1;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-grid{
grid-template-columns:1fr;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-summary-card{
grid-column:auto;
grid-row:auto;
}
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-shipment-modal.is-open{
align-items:stretch;
}
body.b2b-dashboard-page .b2b-exec-detail{
width:100%;
max-width:none;
min-height:100vh;
max-height:100vh;
margin:0;
border-radius:0;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-modal-close{
top:10px;
right:10px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar{
min-height:50px;
padding:0 54px 0 12px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar a{
font-size:12px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar nav{
display:none;
}
body.b2b-dashboard-page .b2b-exec-banner{
grid-template-columns:1fr;
gap:10px;
margin:10px 10px 0;
padding:14px;
border-radius:13px;
}
body.b2b-dashboard-page .b2b-exec-banner h2{
margin-top:10px;
font-size:25px;
}
body.b2b-dashboard-page .b2b-exec-banner p{
font-size:13px;
}
body.b2b-dashboard-page .b2b-exec-banner aside{
min-height:auto;
padding:12px;
}
body.b2b-dashboard-page .b2b-exec-banner aside b{
font-size:18px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-hero{
grid-template-columns:1fr;
gap:10px;
padding:10px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-hero figure{
min-height:205px;
max-height:245px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-facts{
grid-template-columns:repeat(2,minmax(0,1fr));
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-facts span{
min-height:64px;
padding:10px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-facts small,
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-update-card small,
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-summary-card small{
font-size:8.5px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-facts b{
font-size:11.5px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-update-card{
gap:8px;
padding:12px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-progress{
margin:0 10px 10px;
padding:12px 8px;
overflow:hidden;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track{
grid-template-columns:repeat(10,minmax(45px,1fr));
gap:2px;
padding:0;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track::before,
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track::after{
left:24px;
right:24px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track::after{
width:calc((100% - 48px) * var(--track-progress) / 100);
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track i{
width:28px;
height:28px;
font-size:11px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track b{
max-width:44px;
min-height:25px;
font-size:7px;
line-height:1.05;
overflow:visible;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-track small{
display:none;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-grid{
gap:10px;
padding:0 10px 10px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-panel{
min-height:auto;
padding:12px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-products{
grid-template-columns:repeat(2,minmax(0,1fr));
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-products article{
min-height:154px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-products img{
height:62px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-products b{
font-size:12px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-docs{
grid-template-columns:repeat(2,minmax(0,1fr));
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-photo-gallery{
grid-template-columns:1fr;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-photo-gallery figure img{
height:170px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-photo-gallery > div{
grid-template-columns:repeat(4,minmax(0,1fr));
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-photo-gallery > div img,
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-photo-gallery button{
height:58px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-commercial{
padding:0 10px 10px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-commercial .b2b-commercial-products{
padding:12px 10px 2px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-commercial-head{
display:grid;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-commercial-head h3{
font-size:17px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-commercial-head p{
font-size:11px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-approved-option-grid,
body.b2b-dashboard-page .b2b-exec-detail .b2b-approved-main-grid{
grid-template-columns:1fr;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-approved-option{
min-height:62px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-approved-stat-box,
body.b2b-dashboard-page .b2b-exec-detail .b2b-partial-grid{
grid-template-columns:1fr 1fr;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-login-note{
display:grid;
gap:8px;
padding:10px;
font-size:11px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-technical,
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-activity{
margin:0 10px 10px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-trust-strip{
grid-template-columns:repeat(2,minmax(0,1fr));
padding:10px;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-trust-strip span{
min-height:60px;
padding:8px;
border-right:0;
border-bottom:1px solid rgba(255,255,255,.12);
}
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-full-btn{
pointer-events:auto !important;
}
/* Approved B2B customer mobile rebuild from owner reference image. */
.b2b-mobile-approved-filters{
display:none;
}
@media (max-width:620px){
body.b2b-dashboard-page{
background:#f6f9fb;
}
body.b2b-dashboard-page .b2b-dash-content{
padding:8px 10px 84px !important;
}
body.b2b-dashboard-page .b2b-title-row{
display:none !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters{
display:flex !important;
gap:10px;
width:calc(100vw - 20px);
margin:6px 0 12px;
padding:0 0 3px;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters::-webkit-scrollbar{
display:none;
}
body.b2b-dashboard-page .b2b-mobile-request-strip{
display:flex;
align-items:center;
gap:11px;
width:100%;
min-height:54px;
margin:0 0 12px;
padding:10px 13px;
border:1px solid rgba(18,154,91,.2);
border-radius:15px;
background:linear-gradient(135deg,#eefbf5,#ffffff);
color:#062338;
text-align:left;
box-shadow:0 12px 28px rgba(18,154,91,.12);
}
body.b2b-dashboard-page .b2b-mobile-request-strip i{
display:grid;
place-items:center;
flex:0 0 34px;
width:34px;
height:34px;
border-radius:12px;
background:#129a5b;
color:#fff;
}
body.b2b-dashboard-page .b2b-mobile-request-strip b{
display:block;
color:#061832;
font-size:13px;
font-weight:950;
}
body.b2b-dashboard-page .b2b-mobile-request-strip small{
display:block;
color:#40705b;
font-size:11px;
font-weight:800;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters button{
flex:0 0 auto;
min-width:142px;
height:42px;
padding:0 18px;
border:1px solid rgba(8,31,55,.13);
border-radius:999px;
background:#ffffff;
color:#405064;
box-shadow:0 8px 22px rgba(7,38,61,.06);
font-size:12px;
font-weight:900;
white-space:nowrap;
scroll-snap-align:start;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters button.active{
border-color:#d5a23c;
background:#061b33;
color:#ffffff;
box-shadow:0 12px 26px rgba(2,24,43,.18);
}
body.b2b-dashboard-page .b2b-board-toolbar{
display:none !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map){
height:176px !important;
min-height:176px !important;
margin:0 0 12px !important;
border-radius:18px !important;
border:1px solid rgba(213,162,60,.38) !important;
overflow:hidden !important;
box-shadow:0 14px 30px rgba(7,38,61,.18) !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-head{
inset:0 !important;
width:auto !important;
height:auto !important;
pointer-events:none !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-full-btn{
position:absolute !important;
top:13px !important;
right:14px !important;
left:auto !important;
min-height:35px !important;
padding:0 13px !important;
border-radius:11px !important;
border-color:#d5a23c !important;
background:rgba(5,25,46,.86) !important;
color:#ffffff !important;
box-shadow:0 10px 24px rgba(2,24,43,.22) !important;
font-size:11px !important;
pointer-events:auto !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-metrics{
position:absolute !important;
left:12px !important;
right:12px !important;
bottom:10px !important;
z-index:520 !important;
display:grid !important;
grid-template-columns:repeat(3, minmax(0,1fr)) !important;
gap:0 !important;
padding:8px 9px !important;
border:1px solid rgba(255,255,255,.18) !important;
border-radius:14px !important;
background:rgba(4,25,43,.78) !important;
backdrop-filter:blur(10px) !important;
box-shadow:0 12px 28px rgba(2,24,43,.25) !important;
pointer-events:none !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-head > .b2b-map-preview-metrics{
display:grid !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-metrics span{
min-width:0 !important;
padding:0 7px !important;
border:0 !important;
border-right:1px solid rgba(255,255,255,.17) !important;
border-radius:0 !important;
background:transparent !important;
text-align:left !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-metrics span:last-child{
border-right:0 !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-metrics small{
color:rgba(255,255,255,.74) !important;
font-size:8px !important;
letter-spacing:.035em !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-metrics b{
color:#ffffff !important;
font-size:15px !important;
line-height:1 !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-lock-layer,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-explore-btn,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-mobile-timeline,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-mobile-map-metrics,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-mobile-status,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-mobile-live-label,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-summary,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .leaflet-popup-pane{
display:none !important;
}
body.b2b-dashboard-page .b2b-live-map.is-map-locked:not(.is-full-map) .b2b-tracking-map{
pointer-events:none !important;
touch-action:pan-y !important;
}
body.b2b-dashboard-page #all-containers{
margin:0 !important;
}
body.b2b-dashboard-page #all-containers .shipment-row{
width:100% !important;
min-width:0 !important;
min-height:0 !important;
display:grid !important;
grid-template-columns:37% minmax(0,1fr) !important;
grid-template-areas:
"photo info"
"products products"
"track track"
"stock stock" !important;
gap:0 !important;
margin:0 0 14px !important;
border:1px solid rgba(7,27,51,.12) !important;
border-radius:18px !important;
background:#ffffff !important;
box-shadow:0 14px 34px rgba(7,38,61,.12) !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo{
grid-area:photo !important;
width:100% !important;
height:176px !important;
min-height:176px !important;
border-radius:17px 0 0 0 !important;
background:#061b33 !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo .b2b-story-status{
top:10px !important;
left:9px !important;
max-width:calc(100% - 18px) !important;
min-height:25px !important;
padding:5px 10px !important;
border-radius:999px !important;
background:linear-gradient(135deg,#168f54,#2fbd6d) !important;
color:#ffffff !important;
font-size:7.3px !important;
line-height:1 !important;
letter-spacing:.02em !important;
white-space:nowrap !important;
box-shadow:0 8px 18px rgba(22,143,84,.24) !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo.stage-booking_confirmed .b2b-story-status,
body.b2b-dashboard-page #all-containers .b2b-story-carousel.stage-booking_confirmed .b2b-story-status{
background:linear-gradient(135deg,#19a864,#087843) !important;
color:#ffffff !important;
box-shadow:0 8px 18px rgba(9,126,71,.28) !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo.stage-supply_confirmed .b2b-story-status,
body.b2b-dashboard-page #all-containers .b2b-story-carousel.stage-supply_confirmed .b2b-story-status{
background:linear-gradient(135deg,#d8a742,#b87913) !important;
color:#ffffff !important;
box-shadow:0 8px 18px rgba(184,121,19,.26) !important;
}
body.b2b-dashboard-page #all-containers .b2b-story-carousel.stage-booking_confirmed .b2b-story-slide figcaption > i{
background:linear-gradient(135deg,#19a864,#087843) !important;
}
body.b2b-dashboard-page #all-containers .b2b-story-carousel.stage-supply_confirmed .b2b-story-slide figcaption > i{
background:linear-gradient(135deg,#d8a742,#b87913) !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo .b2b-story-reference,
body.b2b-dashboard-page #all-containers .shipment-photo .b2b-story-bottom-info{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-info{
grid-area:info !important;
min-width:0 !important;
height:176px !important;
padding:12px 10px 9px !important;
border-left:1px solid rgba(7,27,51,.08) !important;
}
body.b2b-dashboard-page #all-containers .shipment-route{
margin-bottom:9px !important;
}
body.b2b-dashboard-page #all-containers .shipment-route b{
font-size:12px !important;
line-height:1.2 !important;
}
body.b2b-dashboard-page #all-containers .shipment-route span{
font-size:10px !important;
line-height:1.25 !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts span{
display:none !important;
min-height:50px !important;
padding:7px 8px !important;
border:1px solid #dce9ef !important;
border-radius:10px !important;
background:#f8fbfd !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(2),
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(3),
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(8){
display:block !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(8){
grid-column:1 / -1 !important;
min-height:48px !important;
border-color:rgba(22,143,84,.24) !important;
background:#effbf7 !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts small{
font-size:7.6px !important;
letter-spacing:.04em !important;
color:#607287 !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts b{
margin-top:4px !important;
color:#071b33 !important;
font-size:11px !important;
line-height:1.15 !important;
white-space:normal !important;
}
body.b2b-dashboard-page #all-containers .b2b-tracking-alert{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-products{
grid-area:products !important;
width:100% !important;
min-height:74px !important;
padding:9px 10px 8px !important;
border-top:1px solid rgba(7,27,51,.08) !important;
}
body.b2b-dashboard-page #all-containers .shipment-products h3{
margin:0 0 6px !important;
font-size:9px !important;
letter-spacing:.04em !important;
color:#607287 !important;
}
body.b2b-dashboard-page #all-containers .shipment-products h3 button{
color:#0b63ce !important;
font-size:9px !important;
}
body.b2b-dashboard-page #all-containers .shipment-product-card{
min-height:44px !important;
grid-template-columns:42px minmax(0,1fr) auto !important;
gap:8px !important;
padding:5px 7px !important;
border-radius:11px !important;
}
body.b2b-dashboard-page #all-containers .shipment-product-card:nth-of-type(n+3){
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-product-card img{
width:38px !important;
height:30px !important;
object-fit:contain !important;
}
body.b2b-dashboard-page #all-containers .shipment-product-card b{
font-size:10px !important;
}
body.b2b-dashboard-page #all-containers .shipment-product-card small{
font-size:8px !important;
}
body.b2b-dashboard-page #all-containers .shipment-product-card strong{
font-size:10px !important;
color:#1f9b57 !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
grid-area:track !important;
width:100% !important;
height:64px !important;
max-height:64px !important;
padding:7px 10px 6px !important;
border-top:1px solid rgba(7,27,51,.08) !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scrollbar-width:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking::-webkit-scrollbar{
display:none !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail{
min-width:346px !important;
grid-template-columns:repeat(7, 49px) !important;
min-height:42px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-step:nth-child(n+8){
display:none !important;
}
body.b2b-dashboard-page #all-containers .mini-track-step i{
width:28px !important;
height:28px !important;
font-size:11px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-step b{
display:block !important;
max-width:50px !important;
color:#526274 !important;
font-size:7px !important;
line-height:1.05 !important;
white-space:normal !important;
}
body.b2b-dashboard-page #all-containers .mini-track-step small,
body.b2b-dashboard-page #all-containers .mini-current-status{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock{
grid-area:stock !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px !important;
min-height:58px !important;
padding:9px 10px 12px !important;
border-top:1px solid rgba(7,27,51,.08) !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a{
min-height:42px !important;
border-radius:12px !important;
font-size:11px !important;
font-weight:950 !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a:first-child{
border:1px solid #d5a23c !important;
background:#061b33 !important;
color:#ffffff !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a:nth-child(2){
border:0 !important;
background:linear-gradient(135deg,#f8dc86,#d5a23c) !important;
color:#071b33 !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-commercial-disabled{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:42px !important;
border-radius:12px !important;
background:#eef3f7 !important;
color:#526273 !important;
font-size:11px !important;
font-weight:950 !important;
text-transform:uppercase !important;
letter-spacing:.02em !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock span,
body.b2b-dashboard-page #all-containers .shipment-stock time{
display:none !important;
}
body.b2b-dashboard-page .b2b-mobile-bottom{
height:62px !important;
padding:5px 8px calc(5px + env(safe-area-inset-bottom)) !important;
border-radius:18px 18px 0 0 !important;
}
}
@media (max-width:370px){
body.b2b-dashboard-page .b2b-dash-content{
padding-left:8px !important;
padding-right:8px !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters{
width:calc(100vw - 16px);
}
body.b2b-dashboard-page .b2b-mobile-approved-filters button{
min-width:132px;
height:40px;
padding:0 14px;
font-size:11px;
}
body.b2b-dashboard-page #all-containers .shipment-row{
grid-template-columns:36% minmax(0,1fr) !important;
}
body.b2b-dashboard-page #all-containers .shipment-info{
padding-left:8px !important;
padding-right:8px !important;
}
}
/* Final mobile polish for approved B2B reference: full header text and no clipped tracking rail. */
@media (max-width:620px){
body.b2b-dashboard-page .b2b-sidebar{
padding:18px 114px 12px 20px !important;
}
body.b2b-dashboard-page .b2b-dash-brand{
min-width:0 !important;
gap:10px !important;
}
body.b2b-dashboard-page .b2b-dash-brand img{
flex:0 0 56px !important;
width:56px !important;
height:56px !important;
}
body.b2b-dashboard-page .b2b-dash-brand span{
min-width:0 !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
max-width:calc(100vw - 214px) !important;
overflow:visible !important;
color:#061b33 !important;
font-size:22px !important;
line-height:1.05 !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page .b2b-dash-brand small{
max-width:calc(100vw - 214px) !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
color:#52697a !important;
font-size:8.8px !important;
letter-spacing:.09em !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail{
min-width:100% !important;
width:100% !important;
grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
}
body.b2b-dashboard-page #all-containers .mini-track-step b{
max-width:44px !important;
font-size:6.7px !important;
}
}
@media (max-width:370px){
body.b2b-dashboard-page .b2b-sidebar{
padding-right:102px !important;
padding-left:16px !important;
}
body.b2b-dashboard-page .b2b-dash-brand img{
flex-basis:50px !important;
width:50px !important;
height:50px !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
max-width:calc(100vw - 184px) !important;
font-size:18px !important;
}
body.b2b-dashboard-page .b2b-dash-brand small{
max-width:calc(100vw - 184px) !important;
font-size:7.8px !important;
}
}
/* Desktop B2B map control architecture: reserved zones, truthful tracking status and clean summary strip. */
@media (min-width:921px){
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map){
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-head{
inset:0 !important;
z-index:520 !important;
display:grid !important;
grid-template-columns:minmax(260px, max-content) minmax(280px, 1fr) max-content !important;
grid-template-rows:auto 1fr auto !important;
gap:14px !important;
width:auto !important;
min-height:100% !important;
padding:18px 18px 16px 72px !important;
pointer-events:none !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-head > .b2b-map-live-status{
display:block !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-live-status{
grid-column:1 !important;
grid-row:1 !important;
display:block !important;
max-width:315px !important;
padding:11px 13px !important;
border:1px solid rgba(255,255,255,.2) !important;
border-radius:14px !important;
background:rgba(4,25,43,.78) !important;
color:#ffffff !important;
box-shadow:0 14px 30px rgba(2,24,43,.22) !important;
backdrop-filter:blur(10px) !important;
pointer-events:none !important;
}
body.b2b-dashboard-page .b2b-map-live-status span{
display:flex !important;
align-items:center !important;
gap:8px !important;
color:#ffffff !important;
font-size:11px !important;
font-weight:950 !important;
letter-spacing:.04em !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-map-live-status span i{
width:9px !important;
height:9px !important;
flex:0 0 9px !important;
border-radius:50% !important;
background:#2bbf72 !important;
box-shadow:0 0 0 5px rgba(43,191,114,.14) !important;
}
body.b2b-dashboard-page .b2b-map-live-status small{
display:block !important;
margin-top:4px !important;
color:rgba(255,255,255,.72) !important;
font-size:10px !important;
font-weight:800 !important;
line-height:1.3 !important;
}
body.b2b-dashboard-page .b2b-map-live-status[data-map-live-status="live"] span i{
animation:b2bLiveDotPulse 2.4s ease-out infinite;
}
body.b2b-dashboard-page .b2b-map-live-status[data-map-live-status="verified"] span i{
background:#36a8ff !important;
box-shadow:0 0 0 5px rgba(54,168,255,.13) !important;
}
body.b2b-dashboard-page .b2b-map-live-status[data-map-live-status="delayed"] span i{
background:#d6ad48 !important;
box-shadow:0 0 0 5px rgba(214,173,72,.13) !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-full-btn{
grid-column:3 !important;
grid-row:1 !important;
justify-self:end !important;
align-self:start !important;
min-height:42px !important;
padding:0 16px !important;
border-radius:13px !important;
border:1px solid rgba(213,162,60,.7) !important;
background:rgba(5,25,46,.88) !important;
color:#ffffff !important;
box-shadow:0 16px 34px rgba(2,24,43,.24) !important;
backdrop-filter:blur(10px) !important;
pointer-events:auto !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-metrics{
grid-column:1 / -1 !important;
grid-row:3 !important;
align-self:end !important;
display:grid !important;
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
gap:0 !important;
width:min(690px, calc(100% - 36px)) !important;
margin:0 auto !important;
padding:9px 12px !important;
border:1px solid rgba(255,255,255,.18) !important;
border-radius:16px !important;
background:rgba(4,25,43,.78) !important;
box-shadow:0 16px 34px rgba(2,24,43,.22) !important;
backdrop-filter:blur(10px) !important;
pointer-events:none !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-head > .b2b-map-preview-metrics{
display:grid !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-metrics span{
min-width:0 !important;
padding:4px 18px !important;
border:0 !important;
border-right:1px solid rgba(255,255,255,.18) !important;
border-radius:0 !important;
background:transparent !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-metrics span:last-child{
border-right:0 !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-metrics small{
color:rgba(255,255,255,.68) !important;
font-size:10px !important;
letter-spacing:.04em !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-metrics b{
color:#ffffff !important;
font-size:24px !important;
line-height:1.05 !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-summary{
display:none !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .leaflet-control-container{
display:block !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .leaflet-control-zoom{
z-index:535 !important;
margin:18px 0 0 18px !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .leaflet-control-attribution{
z-index:500 !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-tracking-map{
pointer-events:auto !important;
}
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-lock-layer,
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-explore-btn{
display:none !important;
}
}
body.b2b-dashboard-page .b2b-map-pin.is-current-marker{
z-index:2;
}
body.b2b-dashboard-page .b2b-map-pin.is-active-tracking::before{
content:"";
position:absolute;
inset:-10px;
z-index:-1;
border-radius:inherit;
border:2px solid rgba(47,189,109,.46);
opacity:.75;
animation:b2bMarkerPulse 3.2s ease-out infinite;
pointer-events:none;
}
body.b2b-dashboard-page .b2b-map-pin.is-active-tracking.stage-container_loading::before,
body.b2b-dashboard-page .b2b-map-pin.is-active-tracking.stage-preparation::before{
border-color:rgba(214,173,72,.48);
}
body.b2b-dashboard-page .b2b-map-pin.is-active-tracking.stage-onway::before,
body.b2b-dashboard-page .b2b-map-pin.is-active-tracking.stage-vessel_departure::before{
border-color:rgba(54,168,255,.48);
}
body.b2b-dashboard-page .b2b-route-line{
stroke-dasharray:10 12;
}
body.b2b-dashboard-page .b2b-route-line-current{
stroke-dasharray:18 12;
animation:b2bRouteDirection 9s linear infinite;
}
@keyframes b2bLiveDotPulse{
0%{ box-shadow:0 0 0 0 rgba(43,191,114,.32); }
70%{ box-shadow:0 0 0 9px rgba(43,191,114,0); }
100%{ box-shadow:0 0 0 0 rgba(43,191,114,0); }
}
@keyframes b2bMarkerPulse{
0%{ transform:scale(.92); opacity:.72; }
70%{ transform:scale(1.22); opacity:0; }
100%{ transform:scale(1.22); opacity:0; }
}
@keyframes b2bRouteDirection{
to{ stroke-dashoffset:-90; }
}
@media (prefers-reduced-motion: reduce){
body.b2b-dashboard-page .b2b-map-live-status span i,
body.b2b-dashboard-page .b2b-map-pin.is-active-tracking::before,
body.b2b-dashboard-page .b2b-route-line-current{
animation:none !important;
}
}
/* Mobile B2B detail correction: app-style controls, clean tracking rail and compact purchase choice. */
@media (max-width:620px){
body.b2b-dashboard-page .b2b-shipment-modal.is-open{
background:#f4f8fb !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail{
width:100vw !important;
max-width:100vw !important;
height:100dvh !important;
max-height:100dvh !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
background:#f4f8fb !important;
overflow-x:hidden !important;
}
body.b2b-dashboard-page .b2b-lux-topbar{
position:sticky !important;
top:0 !important;
z-index:8 !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
gap:10px !important;
align-items:center !important;
padding:13px 14px 11px !important;
border-bottom:1px solid rgba(7,27,51,.1) !important;
background:rgba(255,255,255,.96) !important;
backdrop-filter:blur(14px) !important;
}
body.b2b-dashboard-page .b2b-lux-topbar > a{
min-width:0 !important;
color:#061b33 !important;
font-size:18px !important;
font-weight:1000 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page .b2b-lux-topbar nav{
display:flex !important;
gap:8px !important;
overflow:visible !important;
}
body.b2b-dashboard-page .b2b-lux-topbar nav button{
width:42px !important;
min-width:42px !important;
height:42px !important;
min-height:42px !important;
padding:0 !important;
border-radius:14px !important;
font-size:0 !important;
}
body.b2b-dashboard-page .b2b-lux-topbar nav button i{
margin:0 !important;
font-size:16px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-modal-close{
top:60px !important;
right:12px !important;
width:44px !important;
height:44px !important;
border-radius:16px !important;
box-shadow:0 12px 24px rgba(7,27,51,.14) !important;
}
body.b2b-dashboard-page .b2b-lux-hero{
margin:12px 12px 10px !important;
gap:12px !important;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail{
min-height:456px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-slide figcaption{
top:112px !important;
left:14px !important;
width:min(286px, calc(100% - 76px)) !important;
grid-template-columns:34px minmax(0,1fr) !important;
gap:9px !important;
padding:10px !important;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-slide figcaption > i{
width:34px !important;
height:34px !important;
font-size:14px !important;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-slide figcaption strong{
font-size:13px !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-slide figcaption small{
display:block !important;
margin-top:4px !important;
max-height:34px !important;
overflow:hidden !important;
font-size:10px !important;
line-height:1.2 !important;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-slide figcaption em{
display:none !important;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-bottom-info{
top:286px !important;
left:14px !important;
bottom:auto !important;
width:210px !important;
padding:10px !important;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-controls{
right:14px !important;
bottom:74px !important;
}
body.b2b-dashboard-page .b2b-lux-hero .b2b-story-detail .b2b-story-pagination{
right:16px !important;
bottom:20px !important;
}
body.b2b-dashboard-page .b2b-lux-hero-main{
padding:0 2px !important;
}
body.b2b-dashboard-page .b2b-lux-titleline h2{
font-size:31px !important;
letter-spacing:.01em !important;
}
body.b2b-dashboard-page .b2b-lux-titleline em{
min-height:28px !important;
padding:0 12px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-current-strip{
border-radius:13px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-current-strip b,
body.b2b-dashboard-page .b2b-current-strip strong,
body.b2b-dashboard-page .b2b-current-strip small{
padding:10px 12px !important;
}
body.b2b-dashboard-page .b2b-current-strip strong{
font-size:16px !important;
}
body.b2b-dashboard-page .b2b-current-strip small{
font-size:13px !important;
line-height:1.35 !important;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-progress{
margin:10px 12px 12px !important;
padding:13px 12px 12px !important;
border-radius:16px !important;
background:#ffffff !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-progress h3{
margin:0 0 12px !important;
font-size:18px !important;
letter-spacing:.08em !important;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-track{
display:grid !important;
grid-template-columns:repeat(5, minmax(0,1fr)) !important;
gap:6px !important;
min-width:0 !important;
padding:0 !important;
overflow:visible !important;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-track::before,
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-track::after{
display:none !important;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-track span:nth-child(n+6){
display:none !important;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-track span{
min-width:0 !important;
gap:4px !important;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-track i{
width:34px !important;
height:34px !important;
font-size:13px !important;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-track b{
max-width:100% !important;
font-size:8.8px !important;
line-height:1.08 !important;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-track small{
display:none !important;
}
body.b2b-dashboard-page .b2b-lux-panel,
body.b2b-dashboard-page .b2b-lux-commercial{
margin:12px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
margin:0 !important;
padding:13px !important;
border-radius:16px !important;
box-shadow:0 12px 28px rgba(7,27,51,.08) !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking-head{
display:grid !important;
grid-template-columns:1fr !important;
gap:9px !important;
margin-bottom:10px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking-head small{
font-size:10px !important;
letter-spacing:.08em !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking-head h3{
margin-top:4px !important;
font-size:22px !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-booking-head p{
display:grid !important;
grid-template-columns:34px minmax(0,1fr) !important;
gap:9px !important;
padding:10px !important;
border-radius:13px !important;
font-size:13px !important;
line-height:1.35 !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-option-grid{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:9px !important;
margin-bottom:10px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-option{
display:grid !important;
grid-template-columns:34px minmax(0,1fr) 22px !important;
min-height:86px !important;
gap:8px !important;
padding:10px !important;
border-radius:13px !important;
align-items:center !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-icon{
width:34px !important;
height:34px !important;
font-size:13px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-copy b{
font-size:14px !important;
line-height:1.12 !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-copy em{
display:inline-flex !important;
margin:4px 0 0 !important;
padding:2px 6px !important;
font-size:8px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-copy small,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-option > strong{
display:none !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-check,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-option-chevron{
align-self:center !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:9px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid .b2b-full-container-panel,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid .b2b-partial-access-panel,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid .b2b-partial-controls{
padding:10px !important;
border-radius:13px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid h4{
margin:6px 0 5px !important;
font-size:18px !important;
line-height:1.15 !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid p{
margin-bottom:8px !important;
font-size:12px !important;
line-height:1.3 !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-stat-box{
margin-bottom:8px !important;
padding:8px !important;
border-radius:11px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-stat-box b{
font-size:14px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-offer-strip{
grid-template-columns:30px minmax(0,1fr) !important;
gap:8px !important;
padding:8px !important;
border-radius:11px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-offer-strip button{
grid-column:1 / -1 !important;
min-height:34px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-actions{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-actions button,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-main-grid .b2b-partial-access-panel .b2b-commercial-buttons button{
min-height:36px !important;
padding:0 10px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-vip-benefit-grid,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-trust-strip{
display:none !important;
}
}
@media (max-width:370px){
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-option-grid,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail .b2b-approved-actions{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-track{
grid-template-columns:repeat(5, minmax(0,1fr)) !important;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-track i{
width:30px !important;
height:30px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-lux-detail .b2b-detail-track b{
font-size:7.8px !important;
}
}
/* Map cleanup: remove the awkward status-count strip from the customer map preview. */
body.b2b-dashboard-page .b2b-live-map:not(.is-full-map) .b2b-map-preview-metrics{
display:none !important;
}
/* Final strict override for 20260824-06: compact shared Map/Banner visual zone. */
body.b2b-dashboard-page .b2b-title-row{
margin:0 0 10px !important;
padding:0 !important;
}
body.b2b-dashboard-page .b2b-title-row > div:first-child{
display:flex !important;
align-items:flex-end !important;
justify-content:space-between !important;
gap:12px 18px !important;
padding:0 4px 0 14px !important;
border-left:4px solid #d6a136 !important;
}
body.b2b-dashboard-page .b2b-title-row h1{
margin:0 !important;
font-size:clamp(24px,2.2vw,34px) !important;
line-height:1.05 !important;
letter-spacing:0 !important;
}
body.b2b-dashboard-page .b2b-title-row p{
margin:3px 0 0 !important;
max-width:690px !important;
font-size:13px !important;
line-height:1.42 !important;
}
body.b2b-dashboard-page .b2b-title-row .b2b-how-it-works{
flex:0 0 auto !important;
margin:0 !important;
min-height:38px !important;
padding:0 14px !important;
}
body.b2b-dashboard-page .b2b-market-visual{
margin:0 0 12px !important;
padding:0 !important;
min-height:clamp(250px,21vw,332px) !important;
height:auto !important;
border-radius:20px !important;
}
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-map,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-banner-track{
min-height:clamp(250px,21vw,332px) !important;
}
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map:not(.is-full-map){
height:clamp(250px,21vw,332px) !important;
min-height:clamp(250px,21vw,332px) !important;
margin:0 !important;
border-radius:20px !important;
}
body.b2b-dashboard-page .b2b-market-visual .b2b-tracking-map{
height:100% !important;
min-height:0 !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide{
padding:30px 82px 42px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide small{
margin-bottom:10px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide h2{
font-size:clamp(28px,3.2vw,46px) !important;
line-height:.98 !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide p{
margin:11px 0 17px !important;
font-size:15px !important;
line-height:1.35 !important;
}
body.b2b-dashboard-page .b2b-market-search-row{
margin:0 0 12px !important;
}
body.b2b-dashboard-page .b2b-board{
margin-top:0 !important;
}
@media (max-width:920px){
body.b2b-dashboard-page .b2b-title-row > div:first-child{
align-items:flex-start !important;
}
body.b2b-dashboard-page .b2b-title-row .b2b-how-it-works{
min-height:34px !important;
}
body.b2b-dashboard-page .b2b-market-visual,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-map,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-banner-track,
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map:not(.is-full-map){
min-height:230px !important;
height:auto !important;
}
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map:not(.is-full-map){
height:230px !important;
}
}
@media (max-width:620px){
body.b2b-dashboard-page .b2b-market-visual{
margin-bottom:10px !important;
}
body.b2b-dashboard-page .b2b-market-visual,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-map,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-banner-track,
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map:not(.is-full-map){
min-height:216px !important;
}
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map:not(.is-full-map){
height:216px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide{
padding:24px 48px 38px !important;
}
}
/* FishMarket.ai Global Grand Search autocomplete. */
body.b2b-dashboard-page .b2b-grand-search{
position:relative !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) auto auto !important;
align-items:center !important;
gap:8px !important;
padding:6px !important;
border:1px solid rgba(7,27,51,.1) !important;
border-radius:18px !important;
background:#fff !important;
box-shadow:0 16px 34px rgba(7,27,51,.08) !important;
}
body.b2b-dashboard-page .b2b-grand-search input[type="search"]{
width:100% !important;
min-height:42px !important;
padding:0 12px !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:#071b33 !important;
font-size:14px !important;
font-weight:800 !important;
}
body.b2b-dashboard-page .b2b-grand-search input[type="search"]::-webkit-search-cancel-button{
display:none;
}
body.b2b-dashboard-page .b2b-grand-search .b2b-search-clear{
display:none;
width:34px;
height:34px;
border:1px solid #dbe6ed;
border-radius:12px;
background:#f7fafc;
color:#526473;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-grand-search.has-value .b2b-search-clear{
display:grid;
place-items:center;
}
body.b2b-dashboard-page .b2b-grand-search > button[type="submit"]{
min-height:38px !important;
padding:0 14px !important;
border-radius:13px !important;
white-space:nowrap;
}
body.b2b-dashboard-page .b2b-grand-search-panel{
position:absolute;
left:0;
right:0;
top:calc(100% + 10px);
z-index:120;
display:none;
max-height:min(520px, calc(100vh - 210px));
overflow:auto;
padding:10px;
border:1px solid rgba(7,27,51,.1);
border-radius:20px;
background:rgba(255,255,255,.98);
box-shadow:0 26px 60px rgba(7,27,51,.18);
backdrop-filter:blur(14px);
}
body.b2b-dashboard-page .b2b-grand-search-panel.is-open{
display:block;
animation:b2bGrandSearchIn .16s ease-out;
}
body.b2b-dashboard-page .b2b-grand-search-group + .b2b-grand-search-group{
margin-top:8px;
padding-top:8px;
border-top:1px solid #edf2f5;
}
body.b2b-dashboard-page .b2b-grand-search-group h4{
margin:0 0 6px;
padding:0 8px;
color:#6b7c89;
font-size:10px;
font-weight:950;
letter-spacing:.1em;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-grand-search-option{
width:100%;
display:grid;
grid-template-columns:42px minmax(0,1fr) auto;
align-items:center;
gap:10px;
min-height:58px;
padding:8px;
border:1px solid transparent;
border-radius:14px;
background:transparent;
color:#071b33;
text-align:left;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-grand-search-option:hover,
body.b2b-dashboard-page .b2b-grand-search-option.is-active,
body.b2b-dashboard-page .b2b-grand-search-option[aria-selected="true"]{
border-color:rgba(214,161,54,.34);
background:linear-gradient(135deg, rgba(214,161,54,.12), rgba(44,193,201,.08));
}
body.b2b-dashboard-page .b2b-grand-search-option img,
body.b2b-dashboard-page .b2b-grand-search-option > i{
width:42px;
height:42px;
border-radius:12px;
}
body.b2b-dashboard-page .b2b-grand-search-option img{
object-fit:cover;
background:#eef5f7;
}
body.b2b-dashboard-page .b2b-grand-search-option > i{
display:grid;
place-items:center;
background:#eef7f8;
color:#0b7f8a;
}
body.b2b-dashboard-page .b2b-grand-search-option b{
display:block;
color:#071b33;
font-size:13px;
line-height:1.15;
}
body.b2b-dashboard-page .b2b-grand-search-option small{
display:block;
margin-top:3px;
color:#647789;
font-size:11px;
font-weight:800;
line-height:1.25;
}
body.b2b-dashboard-page .b2b-grand-search-option em{
justify-self:end;
max-width:150px;
color:#0b7f8a;
font-size:10px;
font-style:normal;
font-weight:950;
text-align:right;
}
body.b2b-dashboard-page .b2b-grand-search-option mark{
padding:0 2px;
border-radius:4px;
background:rgba(214,161,54,.25);
color:inherit;
}
body.b2b-dashboard-page .b2b-grand-search-all,
body.b2b-dashboard-page .b2b-grand-search-empty button{
width:100%;
min-height:42px;
margin-top:8px;
border:0;
border-radius:14px;
background:#071b33;
color:#fff;
font-weight:950;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-grand-search-empty{
display:grid;
justify-items:center;
gap:7px;
padding:18px 12px;
color:#526473;
text-align:center;
}
body.b2b-dashboard-page .b2b-grand-search-empty i{
display:grid;
place-items:center;
width:42px;
height:42px;
border-radius:14px;
background:rgba(44,193,201,.12);
color:#0b7f8a;
}
body.b2b-dashboard-page .b2b-grand-search-empty b{
color:#071b33;
}
body.b2b-dashboard-page .b2b-grand-search-empty span{
max-width:360px;
font-size:12px;
font-weight:800;
line-height:1.45;
}
@keyframes b2bGrandSearchIn{
from{ opacity:0; transform:translateY(-6px); }
to{ opacity:1; transform:translateY(0); }
}
@media (max-width:620px){
body.b2b-dashboard-page .b2b-grand-search{
grid-template-columns:minmax(0,1fr) 34px 42px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-grand-search > button[type="submit"]{
width:42px !important;
min-width:42px !important;
padding:0 !important;
font-size:0 !important;
}
body.b2b-dashboard-page .b2b-grand-search > button[type="submit"] i{
font-size:14px !important;
}
body.b2b-dashboard-page .b2b-grand-search-panel{
position:fixed;
left:10px;
right:10px;
top:132px;
max-height:calc(100vh - 220px);
border-radius:18px;
}
body.b2b-dashboard-page .b2b-grand-search-option{
grid-template-columns:44px minmax(0,1fr);
min-height:64px;
}
body.b2b-dashboard-page .b2b-grand-search-option em{
grid-column:2;
justify-self:start;
max-width:none;
text-align:left;
}
}
@media (prefers-reduced-motion: reduce){
body.b2b-dashboard-page .b2b-grand-search-panel.is-open{
animation:none;
}
}
/* Premium active search correction. */
body.b2b-dashboard-page .b2b-market-search-row{
align-items:start !important;
gap:14px !important;
}
body.b2b-dashboard-page .b2b-grand-search{
isolation:isolate !important;
grid-template-columns:38px minmax(0,1fr) auto auto !important;
gap:8px !important;
width:100% !important;
max-width:980px !important;
padding:8px !important;
border:1px solid rgba(13, 157, 171, .22) !important;
border-radius:22px !important;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, rgba(15,167,181,.58), rgba(217,166,62,.46), rgba(7,27,51,.12)) border-box !important;
box-shadow:0 18px 42px rgba(7,27,51,.1), 0 0 0 5px rgba(15,167,181,.06) !important;
}
body.b2b-dashboard-page .b2b-grand-search.is-active{
border-color:rgba(15,167,181,.44) !important;
box-shadow:0 24px 58px rgba(7,27,51,.16), 0 0 0 6px rgba(15,167,181,.1) !important;
}
body.b2b-dashboard-page .b2b-search-icon{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:15px;
background:linear-gradient(135deg, rgba(15,167,181,.16), rgba(217,166,62,.14));
color:#078b98;
font-size:14px;
}
body.b2b-dashboard-page .b2b-grand-search input[type="search"]{
min-width:0 !important;
min-height:38px !important;
padding:0 4px !important;
color:#061a32 !important;
font-size:14px !important;
letter-spacing:0 !important;
}
body.b2b-dashboard-page .b2b-grand-search input[type="search"]::placeholder{
color:#607486 !important;
opacity:1 !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-grand-search > button[type="submit"]{
min-height:38px !important;
padding:0 16px !important;
border:0 !important;
border-radius:15px !important;
background:linear-gradient(135deg, #071b33, #0a7890) !important;
color:#fff !important;
box-shadow:0 12px 22px rgba(7,27,51,.16) !important;
}
body.b2b-dashboard-page .b2b-search-hints{
grid-column:1 / -1;
display:flex;
flex-wrap:wrap;
gap:7px;
min-height:30px;
padding:2px 3px 0;
}
body.b2b-dashboard-page .b2b-search-hints button{
display:inline-flex;
align-items:center;
gap:6px;
max-width:100%;
min-height:28px;
padding:0 10px;
border:1px solid rgba(15,167,181,.15);
border-radius:999px;
background:#f5fbfc;
color:#19364b;
font-size:11px;
font-weight:900;
white-space:nowrap;
cursor:pointer;
transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
body.b2b-dashboard-page .b2b-search-hints button i{
color:#078b98;
font-size:11px;
}
body.b2b-dashboard-page .b2b-search-hints button span{
color:#78909f;
font-size:10px;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-search-hints button b{
overflow:hidden;
max-width:190px;
color:#071b33;
text-overflow:ellipsis;
}
body.b2b-dashboard-page .b2b-search-hints button:hover,
body.b2b-dashboard-page .b2b-search-hints button.is-highlighted{
border-color:rgba(217,166,62,.42);
background:linear-gradient(135deg, rgba(217,166,62,.16), rgba(15,167,181,.11));
transform:translateY(-1px);
}
body.b2b-dashboard-page .b2b-grand-search-panel{
top:calc(100% + 12px) !important;
border-color:rgba(15,167,181,.18) !important;
box-shadow:0 30px 70px rgba(7,27,51,.2), 0 0 0 1px rgba(255,255,255,.9) inset !important;
}
body.b2b-dashboard-page .b2b-grand-search-panel::before{
content:"Smart Search";
display:block;
margin:0 0 8px;
padding:7px 10px;
border-radius:14px;
background:linear-gradient(135deg, rgba(15,167,181,.1), rgba(217,166,62,.12));
color:#071b33;
font-size:11px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-market-search-row{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-grand-search{
grid-template-columns:34px minmax(0,1fr) 32px 40px !important;
gap:6px !important;
padding:7px !important;
border-radius:19px !important;
}
body.b2b-dashboard-page .b2b-search-icon{
width:34px;
height:34px;
border-radius:13px;
}
body.b2b-dashboard-page .b2b-grand-search input[type="search"]{
min-height:34px !important;
font-size:13px !important;
}
body.b2b-dashboard-page .b2b-grand-search > button[type="submit"]{
width:40px !important;
min-width:40px !important;
min-height:34px !important;
padding:0 !important;
font-size:0 !important;
}
body.b2b-dashboard-page .b2b-grand-search > button[type="submit"] i{
font-size:13px !important;
}
body.b2b-dashboard-page .b2b-search-hints{
flex-wrap:nowrap;
overflow-x:auto;
padding-bottom:2px;
scrollbar-width:none;
}
body.b2b-dashboard-page .b2b-search-hints::-webkit-scrollbar{
display:none;
}
body.b2b-dashboard-page .b2b-search-hints button{
flex:0 0 auto;
max-width:230px;
}
body.b2b-dashboard-page .b2b-grand-search-panel{
left:12px !important;
right:12px !important;
top:128px !important;
max-height:calc(100vh - 190px) !important;
}
}
/* Final override: small, cute, premium active search. */
body.b2b-dashboard-page .b2b-market-search-row{
align-items:center !important;
justify-content:flex-end !important;
margin:0 0 36px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
position:relative !important;
width:min(100%, 660px) !important;
max-width:660px !important;
min-height:40px !important;
height:40px !important;
padding:4px !important;
gap:5px !important;
grid-template-columns:28px minmax(0,1fr) 26px 76px !important;
border-radius:15px !important;
box-shadow:0 10px 24px rgba(7,27,51,.075), 0 0 0 3px rgba(15,167,181,.04) !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search.is-active{
box-shadow:0 14px 30px rgba(7,27,51,.11), 0 0 0 4px rgba(15,167,181,.065) !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-icon{
width:28px !important;
height:28px !important;
border-radius:10px !important;
font-size:12px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search input[type="search"]{
min-height:28px !important;
font-size:12.5px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-clear{
width:26px !important;
height:26px !important;
border-radius:9px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search > button[type="submit"]{
min-width:76px !important;
min-height:28px !important;
padding:0 9px !important;
border-radius:10px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-hints{
position:absolute !important;
left:5px !important;
right:5px !important;
top:calc(100% + 5px) !important;
z-index:20 !important;
grid-column:auto !important;
display:flex !important;
flex-wrap:nowrap !important;
min-height:20px !important;
gap:4px !important;
overflow:hidden !important;
padding:0 !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-hints button{
flex:0 1 auto !important;
min-height:20px !important;
max-width:158px !important;
padding:0 7px !important;
font-size:9.5px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-hints button:nth-child(n+5){
display:none !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-grand-search-panel{
top:calc(100% + 32px) !important;
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-market-search-row{
margin-bottom:34px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
width:100% !important;
max-width:none !important;
grid-template-columns:28px minmax(0,1fr) 26px 34px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search > button[type="submit"]{
width:34px !important;
min-width:34px !important;
font-size:0 !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-hints button:nth-child(n+4){
display:none !important;
}
}
/* Premium sparkle cue for the left FishMarket.ai menu button. */
body.b2b-dashboard-page .b2b-sidebar-toggle{
position:relative !important;
overflow:hidden !important;
border-color:rgba(236,198,91,.42) !important;
box-shadow:0 14px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(44,193,201,.08) inset !important;
}
body.b2b-dashboard-page .b2b-sidebar-toggle::before{
content:"";
position:absolute;
inset:-45% auto -45% -80%;
width:58%;
pointer-events:none;
background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.08) 34%, rgba(255,255,255,.42) 50%, rgba(236,198,91,.18) 62%, transparent 100%);
transform:skewX(-18deg);
animation:b2bMenuShine 5.2s ease-in-out infinite;
}
body.b2b-dashboard-page .b2b-sidebar-toggle:hover::before,
body.b2b-dashboard-page .b2b-sidebar-toggle:focus-visible::before{
animation-duration:2.6s;
}
body.b2b-dashboard-page .b2b-sidebar-toggle img{
position:relative;
z-index:1;
box-shadow:0 10px 28px rgba(44,193,201,.2), 0 0 0 3px rgba(255,255,255,.12) !important;
}
body.b2b-dashboard-page .b2b-sidebar-toggle span,
body.b2b-dashboard-page .b2b-sidebar-toggle .b2b-sidebar-toggle-icon{
position:relative;
z-index:1;
}
body.b2b-dashboard-page .b2b-sidebar-toggle-icon{
display:inline-grid !important;
place-items:center !important;
width:26px !important;
height:26px !important;
border-radius:50% !important;
background:rgba(236,198,91,.13) !important;
box-shadow:0 0 0 1px rgba(236,198,91,.28) inset, 0 0 18px rgba(44,193,201,.12) !important;
}
body.b2b-dashboard-page .b2b-sidebar-toggle-icon::after{
content:"";
position:absolute;
top:-3px;
right:-3px;
width:7px;
height:7px;
border-radius:50%;
background:#f6d46b;
box-shadow:0 0 0 3px rgba(246,212,107,.14), 0 0 15px rgba(246,212,107,.85), 0 0 22px rgba(44,193,201,.55);
animation:b2bMenuSpark 1.9s ease-in-out infinite;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand::after{
box-shadow:0 0 18px rgba(246,212,107,.18), 0 0 0 1px rgba(44,193,201,.1) inset;
animation:b2bMenuPillPulse 2.8s ease-in-out infinite;
}
@keyframes b2bMenuShine{
0%, 42%{ left:-80%; opacity:0; }
50%{ opacity:1; }
66%, 100%{ left:128%; opacity:0; }
}
@keyframes b2bMenuSpark{
0%, 100%{ opacity:.45; transform:scale(.72); }
45%{ opacity:1; transform:scale(1.18); }
}
@keyframes b2bMenuPillPulse{
0%, 100%{ border-color:rgba(214,173,72,.36); background:rgba(214,173,72,.14); }
50%{ border-color:rgba(44,193,201,.42); background:rgba(44,193,201,.12); }
}
@media (prefers-reduced-motion: reduce){
body.b2b-dashboard-page .b2b-sidebar-toggle::before,
body.b2b-dashboard-page .b2b-sidebar-toggle-icon::after,
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand::after{
animation:none !important;
}
}
/* Final search cleanup: one visible search bar, one slim suggestion line. */
body.b2b-dashboard-page .b2b-market-search-row{
justify-content:flex-end !important;
align-items:flex-start !important;
margin:0 0 30px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-advanced-search-btn{
display:none !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
overflow:visible !important;
width:min(100%, 620px) !important;
max-width:620px !important;
min-height:38px !important;
height:38px !important;
padding:4px !important;
grid-template-columns:27px minmax(0,1fr) 25px 72px !important;
background:
linear-gradient(135deg, rgba(255,255,255,.99), rgba(247,253,253,.98)) padding-box,
linear-gradient(135deg, rgba(21,154,169,.35), rgba(214,161,54,.24)) border-box !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search::before,
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search::after{
display:none !important;
content:none !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-icon{
width:27px !important;
height:27px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search input[type="search"]{
min-height:27px !important;
font-size:12px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-clear{
width:25px !important;
height:25px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search > button[type="submit"]{
min-width:72px !important;
min-height:27px !important;
padding:0 8px !important;
font-size:10.5px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-hints{
position:absolute !important;
left:0 !important;
right:0 !important;
top:calc(100% + 5px) !important;
z-index:20 !important;
display:flex !important;
flex-wrap:nowrap !important;
align-items:center !important;
height:20px !important;
max-height:20px !important;
min-height:20px !important;
overflow:hidden !important;
white-space:nowrap !important;
gap:4px !important;
padding:0 !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-hints button{
flex:0 1 auto !important;
height:20px !important;
min-height:20px !important;
max-width:138px !important;
padding:0 7px !important;
font-size:9px !important;
line-height:20px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-hints button span{
display:none !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-hints button:nth-child(n+4){
display:none !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-grand-search-panel{
top:calc(100% + 30px) !important;
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-market-search-row{
margin-bottom:30px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
width:100% !important;
max-width:none !important;
grid-template-columns:27px minmax(0,1fr) 25px 33px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search > button[type="submit"]{
min-width:33px !important;
width:33px !important;
font-size:0 !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-hints button{
max-width:112px !important;
}
}
/* Final dashboard auto-fit: content fills remaining screen after menu open/close. */
@media (min-width:921px){
body.b2b-dashboard-page{
overflow-x:hidden !important;
}
body.b2b-dashboard-page .b2b-app-shell{
display:grid !important;
width:100vw !important;
max-width:none !important;
margin:0 !important;
grid-template-columns:88px minmax(0, calc(100vw - 88px)) !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-open{
grid-template-columns:292px minmax(0, calc(100vw - 292px)) !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed{
grid-template-columns:88px minmax(0, calc(100vw - 88px)) !important;
}
body.b2b-dashboard-page .b2b-sidebar{
width:100% !important;
max-width:none !important;
}
body.b2b-dashboard-page .b2b-dash-main{
width:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-dash-content{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding-left:clamp(14px, 1.35vw, 24px) !important;
padding-right:clamp(14px, 1.35vw, 24px) !important;
}
body.b2b-dashboard-page .b2b-topbar,
body.b2b-dashboard-page .b2b-title-row,
body.b2b-dashboard-page .b2b-market-visual,
body.b2b-dashboard-page .b2b-market-search-row,
body.b2b-dashboard-page .b2b-board,
body.b2b-dashboard-page .shipment-row,
body.b2b-dashboard-page .b2b-section{
max-width:none !important;
}
}
/* Final search audit cleanup: suggestions remain inside the search field only. */
body.b2b-dashboard-page .b2b-market-search-row{
position:relative !important;
z-index:80 !important;
align-items:center !important;
margin-bottom:12px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
position:relative !important;
z-index:90 !important;
overflow:visible !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-hints,
body.b2b-dashboard-page [data-b2b-search-hints]{
display:none !important;
visibility:hidden !important;
position:absolute !important;
inset:auto !important;
width:0 !important;
height:0 !important;
min-width:0 !important;
min-height:0 !important;
max-width:0 !important;
max-height:0 !important;
margin:0 !important;
padding:0 !important;
gap:0 !important;
overflow:hidden !important;
pointer-events:none !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-grand-search-panel{
top:calc(100% + 8px) !important;
z-index:999 !important;
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-market-search-row{
margin-bottom:12px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-grand-search-panel{
left:0 !important;
right:0 !important;
top:calc(100% + 8px) !important;
max-height:56vh !important;
}
}
/* Final sidebar button polish: keep the collapsed menu control square. */
@media (min-width:921px){
body.b2b-dashboard-page .b2b-app-shell{
grid-template-columns:104px minmax(0, calc(100vw - 104px)) !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed{
grid-template-columns:104px minmax(0, calc(100vw - 104px)) !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-sidebar{
padding-left:14px !important;
padding-right:14px !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-sidebar-toggle{
width:76px !important;
min-width:76px !important;
max-width:76px !important;
height:76px !important;
min-height:76px !important;
max-height:76px !important;
aspect-ratio:1 / 1 !important;
margin:0 auto !important;
padding:8px !important;
border-radius:18px !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand{
gap:5px !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand img{
width:40px !important;
height:40px !important;
min-width:40px !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand::after{
min-width:42px !important;
min-height:13px !important;
height:13px !important;
padding:0 5px !important;
font-size:7.5px !important;
letter-spacing:.09em !important;
}
}
/* Final premium compact search dropdown: one or two clean rows only. */
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-grand-search-panel{
top:calc(100% + 7px) !important;
max-height:118px !important;
overflow:hidden !important;
padding:6px !important;
border-radius:14px !important;
border:1px solid rgba(21,154,169,.2) !important;
background:rgba(255,255,255,.985) !important;
box-shadow:0 14px 32px rgba(7,27,51,.14), 0 0 0 3px rgba(44,193,201,.035) !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-grand-search-panel::before{
display:none !important;
content:none !important;
margin:0 !important;
padding:0 !important;
}
body.b2b-dashboard-page .b2b-grand-search-group,
body.b2b-dashboard-page .b2b-grand-search-group.is-compact{
display:grid !important;
gap:4px !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
}
body.b2b-dashboard-page .b2b-grand-search-group h4,
body.b2b-dashboard-page .b2b-grand-search-all{
display:none !important;
}
body.b2b-dashboard-page .b2b-grand-search-option{
position:static !important;
min-height:48px !important;
grid-template-columns:34px minmax(0, 1fr) auto !important;
gap:8px !important;
padding:6px 7px !important;
border-radius:11px !important;
}
body.b2b-dashboard-page .b2b-grand-search-option img,
body.b2b-dashboard-page .b2b-grand-search-option > i{
width:34px !important;
height:34px !important;
border-radius:9px !important;
}
body.b2b-dashboard-page .b2b-grand-search-option b{
font-size:12px !important;
line-height:1.08 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page .b2b-grand-search-option small{
margin-top:2px !important;
font-size:9.5px !important;
line-height:1.15 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page .b2b-grand-search-option em{
max-width:115px !important;
font-size:9px !important;
line-height:1.15 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page .b2b-grand-search-empty.is-compact{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:8px !important;
min-height:42px !important;
padding:6px 8px !important;
text-align:left !important;
}
body.b2b-dashboard-page .b2b-grand-search-empty.is-compact i{
width:30px !important;
height:30px !important;
border-radius:9px !important;
flex:0 0 auto !important;
}
body.b2b-dashboard-page .b2b-grand-search-empty.is-compact span{
max-width:none !important;
font-size:11px !important;
line-height:1.2 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-grand-search-panel{
max-height:112px !important;
padding:5px !important;
}
body.b2b-dashboard-page .b2b-grand-search-option{
min-height:46px !important;
grid-template-columns:32px minmax(0, 1fr) !important;
}
body.b2b-dashboard-page .b2b-grand-search-option img,
body.b2b-dashboard-page .b2b-grand-search-option > i{
width:32px !important;
height:32px !important;
}
body.b2b-dashboard-page .b2b-grand-search-option em{
display:none !important;
}
}
/* Final search focus polish: no oversized glow when the field is only clicked. */
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search,
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search.is-active,
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search:focus-within{
outline:none !important;
box-shadow:0 10px 22px rgba(7,27,51,.075), inset 0 0 0 1px rgba(21,154,169,.18) !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search.is-active{
border-color:rgba(21,154,169,.32) !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search input[type="search"]:focus,
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search button:focus{
outline:none !important;
box-shadow:none !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search button:focus-visible{
outline:2px solid rgba(21,154,169,.32) !important;
outline-offset:1px !important;
}
/* Final live shipment map CTA: make the purpose clear and premium. */
body.b2b-dashboard-page .b2b-floating-map-btn{
grid-template-columns:34px minmax(0, 1fr) !important;
min-width:150px !important;
border-color:rgba(51,209,122,.54) !important;
background:
linear-gradient(135deg, rgba(6,27,51,.98), rgba(8,54,68,.96)) padding-box,
linear-gradient(135deg, rgba(51,209,122,.78), rgba(245,200,90,.58), rgba(44,193,201,.7)) border-box !important;
box-shadow:0 18px 44px rgba(7,27,51,.28), 0 0 0 3px rgba(51,209,122,.08), 0 0 28px rgba(51,209,122,.18) !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn::after{
content:"";
position:absolute;
inset:4px;
pointer-events:none;
border-radius:inherit;
border:1px solid rgba(255,255,255,.08);
}
body.b2b-dashboard-page .b2b-floating-map-btn > i{
background:linear-gradient(135deg, rgba(51,209,122,.18), rgba(44,193,201,.16)) !important;
color:#7ff5af !important;
box-shadow:inset 0 0 0 1px rgba(127,245,175,.16), 0 0 18px rgba(51,209,122,.16) !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn span{
display:flex !important;
color:#7ff5af !important;
letter-spacing:.08em !important;
text-shadow:0 0 12px rgba(51,209,122,.32) !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn b{
font-size:12px !important;
letter-spacing:.01em !important;
min-width:70px !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn:hover,
body.b2b-dashboard-page .b2b-floating-map-btn:focus-visible{
transform:translateY(-2px) !important;
box-shadow:0 22px 52px rgba(7,27,51,.34), 0 0 0 4px rgba(51,209,122,.12), 0 0 34px rgba(51,209,122,.25) !important;
}
@media (max-width:920px){
body.b2b-dashboard-page .b2b-floating-map-btn{
width:128px !important;
min-width:128px !important;
min-height:66px !important;
grid-template-columns:30px minmax(0, 1fr) !important;
gap:5px 7px !important;
padding:8px 9px !important;
border-radius:17px !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn > i{
width:30px !important;
height:30px !important;
border-radius:12px !important;
font-size:15px !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn span{
font-size:8.5px !important;
line-height:1 !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn b{
font-size:11px !important;
line-height:1 !important;
}
}
/* Strict right-side stock status panel only. */
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel{
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
align-items:center !important;
gap:3px !important;
margin-top:2px !important;
padding:7px 8px !important;
border:1px solid rgba(214,161,54,.58) !important;
border-radius:12px !important;
background:linear-gradient(180deg,#fffefa 0%, #ffffff 52%, #fffaf0 100%) !important;
box-shadow:0 8px 18px rgba(7,27,51,.045), inset 0 0 0 1px rgba(255,255,255,.86) !important;
color:#071b33 !important;
text-align:center !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel > small{
display:block !important;
color:#071b33 !important;
font-size:8px !important;
font-weight:1000 !important;
letter-spacing:.045em !important;
line-height:1 !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-badge{
display:grid !important;
grid-template-columns:minmax(0,1fr) 8px !important;
align-items:center !important;
gap:6px !important;
min-height:24px !important;
padding:4px 7px !important;
border:1px solid rgba(48,184,102,.25) !important;
border-radius:9px !important;
background:linear-gradient(135deg, rgba(232,248,237,.96), rgba(245,253,247,.96)) !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-badge b{
display:block !important;
margin:0 !important;
color:#16884a !important;
font-size:8.8px !important;
font-weight:1000 !important;
line-height:1.18 !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-badge i{
display:block !important;
width:7px !important;
height:7px !important;
border-radius:50% !important;
background:#30b866 !important;
box-shadow:0 0 0 3px rgba(48,184,102,.12) !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel > strong{
justify-self:center !important;
display:block !important;
margin:3px 0 0 !important;
color:#159d5b !important;
font-size:16px !important;
font-weight:1000 !important;
line-height:1.05 !important;
letter-spacing:0 !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel > span{
justify-self:center !important;
display:block !important;
color:#071b33 !important;
font-size:9px !important;
font-weight:900 !important;
line-height:1.1 !important;
text-transform:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-progress{
position:relative !important;
height:5px !important;
width:100% !important;
overflow:hidden !important;
border-radius:999px !important;
background:#e6ebe8 !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-progress i{
display:block !important;
height:100% !important;
min-width:0 !important;
border-radius:999px !important;
background:linear-gradient(90deg,#30b866,#179853) !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel > em{
justify-self:center !important;
color:#071b33 !important;
font-size:9px !important;
font-style:normal !important;
font-weight:1000 !important;
line-height:1 !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel > p{
justify-self:center !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
margin:2px 0 0 !important;
padding:3px 7px !important;
border-radius:999px !important;
background:rgba(48,184,102,.08) !important;
color:#16884a !important;
font-size:8.6px !important;
font-weight:950 !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel > p b{
display:inline !important;
margin:0 !important;
color:#526273 !important;
font-size:8.8px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-limited .b2b-stock-status-badge{
border-color:rgba(214,161,54,.34) !important;
background:linear-gradient(135deg, rgba(255,247,223,.96), rgba(255,253,245,.96)) !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-limited .b2b-stock-status-badge b,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-limited > strong{
color:#b47705 !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-limited .b2b-stock-status-badge i,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-limited .b2b-stock-progress i{
background:linear-gradient(90deg,#f5c85a,#d6a136) !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-allocated .b2b-stock-status-badge,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-closed .b2b-stock-status-badge{
border-color:rgba(122,137,150,.24) !important;
background:#f2f5f7 !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-allocated .b2b-stock-status-badge b,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-closed .b2b-stock-status-badge b,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-allocated > strong,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-closed > strong{
color:#526273 !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-allocated .b2b-stock-status-badge i,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-closed .b2b-stock-status-badge i,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-allocated .b2b-stock-progress i,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel.is-closed .b2b-stock-progress i{
background:#9aa8b4 !important;
}
@media (max-width:920px){
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel{
grid-column:1 / -1 !important;
margin-top:0 !important;
padding:7px 8px !important;
border-radius:11px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel > small,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel > span,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel > em,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel > p{
display:block !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel > strong{
font-size:15px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-badge{
min-height:24px !important;
}
}
/* Clear shipment journey completion rail: completed route is colored, pending route stays quiet. */
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail::before{
height:4px !important;
border-radius:999px !important;
background:linear-gradient(90deg, rgba(220,230,238,.92), rgba(238,243,247,.84)) !important;
box-shadow:inset 0 0 0 1px rgba(180,198,211,.35) !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail::after{
height:4px !important;
border-radius:999px !important;
background:linear-gradient(90deg,#18a85b 0%, #16a1c8 100%) !important;
box-shadow:0 0 0 1px rgba(22,161,200,.16), 0 5px 12px rgba(24,168,91,.18) !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail > span.is-done i{
border-color:#18a85b !important;
background:#ecfff5 !important;
color:#118548 !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail > span.is-current i{
border-color:#1598d4 !important;
background:#eaf8ff !important;
color:#087fc0 !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .mini-track-rail > span.is-future i{
border-color:#d7e1e8 !important;
background:#ffffff !important;
color:#9aabb7 !important;
}
body.b2b-dashboard-page .b2b-detail-track::before{
height:4px !important;
border-radius:999px !important;
background:linear-gradient(90deg, rgba(221,231,238,.94), rgba(240,244,248,.88)) !important;
box-shadow:inset 0 0 0 1px rgba(180,198,211,.36) !important;
}
body.b2b-dashboard-page .b2b-detail-track::after{
height:4px !important;
border-radius:999px !important;
background:linear-gradient(90deg,#18a85b 0%, #1598d4 100%) !important;
box-shadow:0 0 0 1px rgba(21,152,212,.16), 0 6px 14px rgba(24,168,91,.18) !important;
}
body.b2b-dashboard-page .b2b-detail-track > span.is-done i{
border-color:#18a85b !important;
background:#ecfff5 !important;
color:#118548 !important;
}
body.b2b-dashboard-page .b2b-detail-track > span.is-current i{
border-color:#1598d4 !important;
background:#eaf8ff !important;
color:#087fc0 !important;
}
body.b2b-dashboard-page .b2b-detail-track > span.is-future i{
border-color:#d7e1e8 !important;
background:#ffffff !important;
color:#9aabb7 !important;
}
/* Premium signed-in customer workspace and company profile. */
body.b2b-dashboard-page .b2b-account.is-signed-in .b2b-customer-avatar{
overflow:hidden !important;
background:#ffffff !important;
}
body.b2b-dashboard-page .b2b-account.is-signed-in .b2b-customer-avatar img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
border-radius:50% !important;
}
body.b2b-dashboard-page .b2b-account-card-head{
display:grid !important;
grid-template-columns:48px minmax(0,1fr) !important;
gap:12px !important;
align-items:center !important;
padding:14px !important;
margin:0 0 8px !important;
border-radius:16px !important;
background:linear-gradient(135deg,#071b33,#0a2b4d) !important;
color:#ffffff !important;
box-shadow:0 16px 34px rgba(7,27,51,.22) !important;
}
body.b2b-dashboard-page .b2b-account-card-head span{
width:48px !important;
height:48px !important;
overflow:hidden !important;
border-radius:16px !important;
background:#ffffff !important;
}
body.b2b-dashboard-page .b2b-account-card-head img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
body.b2b-dashboard-page .b2b-account-card-head b,
body.b2b-dashboard-page .b2b-account-card-head small,
body.b2b-dashboard-page .b2b-account-card-head em{
display:block !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page .b2b-account-card-head small{
color:#8df4bd !important;
font-size:11px !important;
font-weight:900 !important;
}
body.b2b-dashboard-page .b2b-account-card-head em{
color:rgba(255,255,255,.72) !important;
font-size:11px !important;
font-style:normal !important;
}
body.b2b-dashboard-page .b2b-customer-portal{
max-width:1180px !important;
margin:28px auto !important;
padding:0 18px !important;
color:#071b33 !important;
}
body.b2b-dashboard-page .b2b-customer-portal-hero{
display:grid !important;
grid-template-columns:72px minmax(0,1fr) auto !important;
gap:16px !important;
align-items:center !important;
padding:20px !important;
border:1px solid rgba(7,27,51,.08) !important;
border-radius:22px !important;
background:linear-gradient(135deg,#ffffff,#f5fbfc) !important;
box-shadow:0 18px 48px rgba(7,27,51,.08) !important;
}
body.b2b-dashboard-page .b2b-account-logo-large{
width:72px !important;
height:72px !important;
overflow:hidden !important;
border-radius:22px !important;
background:#ffffff !important;
box-shadow:inset 0 0 0 1px rgba(7,27,51,.08) !important;
}
body.b2b-dashboard-page .b2b-account-logo-large img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
body.b2b-dashboard-page .b2b-customer-portal-hero small{
display:block !important;
color:#118c93 !important;
font-size:12px !important;
font-weight:1000 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-customer-portal-hero h2{
margin:3px 0 4px !important;
font-size:clamp(24px,3vw,36px) !important;
line-height:1.05 !important;
letter-spacing:0 !important;
}
body.b2b-dashboard-page .b2b-customer-portal-hero p{
margin:0 !important;
color:#5e7081 !important;
font-size:14px !important;
font-weight:750 !important;
}
body.b2b-dashboard-page .b2b-customer-portal-hero button,
body.b2b-dashboard-page .b2b-profile-completion button,
body.b2b-dashboard-page .b2b-reservation-actions button,
body.b2b-dashboard-page .b2b-profile-form-actions button{
min-height:42px !important;
border:0 !important;
border-radius:14px !important;
padding:0 16px !important;
background:#071b33 !important;
color:#ffffff !important;
font-weight:950 !important;
cursor:pointer !important;
}
body.b2b-dashboard-page .b2b-customer-metrics{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:12px !important;
margin:14px 0 !important;
}
body.b2b-dashboard-page .b2b-customer-metrics span,
body.b2b-dashboard-page .b2b-profile-grid article{
display:block !important;
padding:16px !important;
border:1px solid rgba(7,27,51,.08) !important;
border-radius:18px !important;
background:#ffffff !important;
box-shadow:0 12px 30px rgba(7,27,51,.055) !important;
}
body.b2b-dashboard-page .b2b-customer-metrics b{
display:block !important;
color:#071b33 !important;
font-size:24px !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-customer-metrics small,
body.b2b-dashboard-page .b2b-profile-grid small{
color:#68798a !important;
font-size:11px !important;
font-weight:1000 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-reservation-list{
display:grid !important;
gap:14px !important;
}
body.b2b-dashboard-page .b2b-reservation-card{
display:grid !important;
grid-template-columns:176px minmax(0,1fr) !important;
gap:16px !important;
padding:14px !important;
border:1px solid rgba(7,27,51,.08) !important;
border-radius:22px !important;
background:#ffffff !important;
box-shadow:0 14px 38px rgba(7,27,51,.07) !important;
}
body.b2b-dashboard-page .b2b-reservation-card figure{
position:relative !important;
margin:0 !important;
min-height:145px !important;
overflow:hidden !important;
border-radius:18px !important;
background:#eaf2f5 !important;
}
body.b2b-dashboard-page .b2b-reservation-card figure img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
body.b2b-dashboard-page .b2b-reservation-card figcaption{
position:absolute !important;
left:10px !important;
bottom:10px !important;
padding:6px 9px !important;
border-radius:999px !important;
background:rgba(7,27,51,.86) !important;
color:#ffffff !important;
font-size:11px !important;
font-weight:950 !important;
}
body.b2b-dashboard-page .b2b-reservation-title span,
body.b2b-dashboard-page .b2b-reservation-title small,
body.b2b-dashboard-page .b2b-reservation-actions span{
display:block !important;
color:#6a7a88 !important;
font-size:12px !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-reservation-title b{
display:block !important;
margin:4px 0 !important;
font-size:20px !important;
line-height:1.15 !important;
}
body.b2b-dashboard-page .b2b-reservation-body dl,
body.b2b-dashboard-page .b2b-profile-grid dl{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:8px !important;
margin:12px 0 !important;
}
body.b2b-dashboard-page .b2b-reservation-body dl div,
body.b2b-dashboard-page .b2b-profile-grid dl div{
padding:10px !important;
border-radius:13px !important;
background:#f6f9fb !important;
}
body.b2b-dashboard-page .b2b-reservation-body dt,
body.b2b-dashboard-page .b2b-profile-grid dt{
color:#748391 !important;
font-size:10px !important;
font-weight:1000 !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-reservation-body dd,
body.b2b-dashboard-page .b2b-profile-grid dd{
margin:3px 0 0 !important;
color:#071b33 !important;
font-size:12px !important;
font-weight:950 !important;
}
body.b2b-dashboard-page .b2b-reservation-actions{
display:flex !important;
gap:10px !important;
align-items:center !important;
justify-content:space-between !important;
}
body.b2b-dashboard-page .b2b-empty-account-state{
padding:28px !important;
border:1px dashed rgba(17,140,147,.32) !important;
border-radius:22px !important;
background:#f5fbfc !important;
text-align:center !important;
}
body.b2b-dashboard-page .b2b-empty-account-state i{
color:#118c93 !important;
font-size:32px !important;
}
body.b2b-dashboard-page .b2b-empty-account-state b,
body.b2b-dashboard-page .b2b-empty-account-state p,
body.b2b-dashboard-page .b2b-empty-account-state a{
display:block !important;
margin-top:8px !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations{
max-width:1240px !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-portal-hero{
background:linear-gradient(135deg,#061b33,#0b2b4f 62%,#0d7d8b) !important;
color:#ffffff !important;
border-color:rgba(213,172,67,.34) !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-portal-hero h2,
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-portal-hero p{
color:#ffffff !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-portal-hero small{
color:#f1c85f !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-metrics{
grid-template-columns:repeat(6,minmax(0,1fr)) !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-metrics span{
min-height:96px !important;
border-radius:16px !important;
background:linear-gradient(180deg,#ffffff,#f7fbfc) !important;
}
body.b2b-dashboard-page .b2b-reservation-toolbar{
display:grid !important;
grid-template-columns:minmax(260px,1fr) 190px 190px !important;
gap:10px !important;
margin:14px 0 !important;
padding:12px !important;
border:1px solid rgba(7,27,51,.08) !important;
border-radius:18px !important;
background:#ffffff !important;
box-shadow:0 12px 32px rgba(7,27,51,.06) !important;
}
body.b2b-dashboard-page .b2b-reservation-toolbar label{
display:grid !important;
grid-template-columns:34px minmax(0,1fr) !important;
align-items:center !important;
min-height:44px !important;
border:1px solid rgba(11,43,79,.12) !important;
border-radius:14px !important;
background:#f8fbfd !important;
}
body.b2b-dashboard-page .b2b-reservation-toolbar label i{
color:#0d7d8b !important;
text-align:center !important;
}
body.b2b-dashboard-page .b2b-reservation-toolbar input,
body.b2b-dashboard-page .b2b-reservation-toolbar select{
width:100% !important;
min-height:44px !important;
border:1px solid rgba(11,43,79,.12) !important;
border-radius:14px !important;
background:#f8fbfd !important;
color:#071b33 !important;
font-size:13px !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-reservation-toolbar input{
border:0 !important;
background:transparent !important;
outline:0 !important;
}
body.b2b-dashboard-page .b2b-reservation-status-row{
display:flex !important;
flex-wrap:wrap !important;
gap:8px !important;
margin:10px 0 0 !important;
}
body.b2b-dashboard-page .b2b-reservation-status,
body.b2b-dashboard-page .b2b-reservation-shipment-status{
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
padding:7px 10px !important;
border-radius:999px !important;
border:1px solid transparent !important;
font-size:11px !important;
font-weight:1000 !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-reservation-status.is-pending{ background:#fff7df !important; color:#8a5f08 !important; border-color:#efd999 !important; }
body.b2b-dashboard-page .b2b-reservation-status.is-confirmed{ background:#e7f8ef !important; color:#067143 !important; border-color:#b9ebd0 !important; }
body.b2b-dashboard-page .b2b-reservation-status.is-completed{ background:#eaf3ff !important; color:#0b559f !important; border-color:#bddcff !important; }
body.b2b-dashboard-page .b2b-reservation-status.is-cancel-requested{ background:#f3ecff !important; color:#6e3fc5 !important; border-color:#d8c7ff !important; }
body.b2b-dashboard-page .b2b-reservation-status.is-closed{ background:#fff0f0 !important; color:#b82727 !important; border-color:#ffd0d0 !important; }
body.b2b-dashboard-page .b2b-reservation-shipment-status{ background:#edf9fb !important; color:#08798a !important; border-color:#c5edf1 !important; }
body.b2b-dashboard-page .b2b-reservation-mini-timeline{
display:grid !important;
grid-template-columns:repeat(5,minmax(0,1fr)) !important;
gap:0 !important;
margin:12px 0 !important;
padding:0 !important;
list-style:none !important;
}
body.b2b-dashboard-page .b2b-reservation-mini-timeline li{
position:relative !important;
display:grid !important;
justify-items:center !important;
gap:6px !important;
color:#8b98a6 !important;
font-size:10px !important;
font-weight:900 !important;
text-align:center !important;
}
body.b2b-dashboard-page .b2b-reservation-mini-timeline li::before{
content:"" !important;
position:absolute !important;
top:7px !important;
left:0 !important;
right:0 !important;
height:2px !important;
background:#dbe6ee !important;
z-index:0 !important;
}
body.b2b-dashboard-page .b2b-reservation-mini-timeline li.is-done::before{ background:#0d7d8b !important; }
body.b2b-dashboard-page .b2b-reservation-mini-timeline i{
position:relative !important;
z-index:1 !important;
width:16px !important;
height:16px !important;
border-radius:50% !important;
border:3px solid #dbe6ee !important;
background:#ffffff !important;
}
body.b2b-dashboard-page .b2b-reservation-mini-timeline li.is-done i{ border-color:#0d7d8b !important; background:#0d7d8b !important; }
body.b2b-dashboard-page .b2b-reservation-actions .ghost{
width:42px !important;
padding:0 !important;
background:#eef5f8 !important;
color:#071b33 !important;
}
body.b2b-dashboard-page .b2b-reservation-drawer{
position:fixed !important;
inset:0 !important;
z-index:120 !important;
}
body.b2b-dashboard-page .b2b-reservation-drawer[hidden]{
display:none !important;
}
body.b2b-dashboard-page .b2b-reservation-drawer-backdrop{
position:absolute !important;
inset:0 !important;
background:rgba(3,14,28,.54) !important;
}
body.b2b-dashboard-page .b2b-reservation-drawer-panel{
position:absolute !important;
top:0 !important;
right:0 !important;
width:min(460px, 94vw) !important;
height:100% !important;
overflow:auto !important;
padding:24px !important;
background:#ffffff !important;
color:#071b33 !important;
box-shadow:-20px 0 60px rgba(3,14,28,.24) !important;
}
body.b2b-dashboard-page .b2b-reservation-drawer-close{
position:absolute !important;
top:16px !important;
right:16px !important;
width:40px !important;
height:40px !important;
border:0 !important;
border-radius:50% !important;
background:#eef5f8 !important;
color:#071b33 !important;
}
body.b2b-dashboard-page .b2b-reservation-drawer-panel > small{
color:#0d7d8b !important;
font-size:12px !important;
font-weight:1000 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-reservation-drawer-panel h3{
margin:7px 46px 10px 0 !important;
color:#061b33 !important;
font-size:28px !important;
}
body.b2b-dashboard-page .b2b-drawer-summary{
display:grid !important;
grid-template-columns:96px minmax(0,1fr) !important;
gap:14px !important;
align-items:center !important;
margin:18px 0 !important;
padding:12px !important;
border:1px solid rgba(7,27,51,.08) !important;
border-radius:18px !important;
background:#f8fbfd !important;
}
body.b2b-dashboard-page .b2b-drawer-summary figure{
margin:0 !important;
height:86px !important;
overflow:hidden !important;
border-radius:14px !important;
}
body.b2b-dashboard-page .b2b-drawer-summary img{ width:100% !important; height:100% !important; object-fit:cover !important; }
body.b2b-dashboard-page .b2b-drawer-summary b,
body.b2b-dashboard-page .b2b-drawer-summary span,
body.b2b-dashboard-page .b2b-drawer-summary em{ display:block !important; }
body.b2b-dashboard-page .b2b-drawer-summary b{ font-size:18px !important; }
body.b2b-dashboard-page .b2b-drawer-summary span{ color:#0d7d8b !important; font-weight:950 !important; }
body.b2b-dashboard-page .b2b-drawer-summary em{ color:#657789 !important; font-style:normal !important; font-weight:800 !important; }
body.b2b-dashboard-page .b2b-drawer-facts{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px !important;
margin:0 0 18px !important;
}
body.b2b-dashboard-page .b2b-drawer-facts div{
padding:12px !important;
border-radius:14px !important;
background:#f6f9fb !important;
}
body.b2b-dashboard-page .b2b-drawer-facts dt{ color:#718293 !important; font-size:10px !important; font-weight:1000 !important; text-transform:uppercase !important; }
body.b2b-dashboard-page .b2b-drawer-facts dd{ margin:4px 0 0 !important; color:#071b33 !important; font-size:12px !important; font-weight:950 !important; }
body.b2b-dashboard-page .b2b-drawer-timeline{
display:grid !important;
gap:12px !important;
margin:18px 0 !important;
padding:0 !important;
list-style:none !important;
}
body.b2b-dashboard-page .b2b-drawer-timeline li{
display:grid !important;
grid-template-columns:22px minmax(0,1fr) !important;
gap:10px !important;
align-items:start !important;
}
body.b2b-dashboard-page .b2b-drawer-timeline i{
width:18px !important;
height:18px !important;
margin-top:3px !important;
border:3px solid #dbe6ee !important;
border-radius:50% !important;
background:#fff !important;
}
body.b2b-dashboard-page .b2b-drawer-timeline li.is-done i{ border-color:#0d7d8b !important; background:#0d7d8b !important; }
body.b2b-dashboard-page .b2b-drawer-timeline b,
body.b2b-dashboard-page .b2b-drawer-timeline small{ display:block !important; }
body.b2b-dashboard-page .b2b-drawer-timeline b{ color:#071b33 !important; font-size:13px !important; }
body.b2b-dashboard-page .b2b-drawer-timeline small{ color:#697a8a !important; font-size:12px !important; font-weight:750 !important; }
body.b2b-dashboard-page .b2b-drawer-actions{
display:grid !important;
gap:9px !important;
margin-top:18px !important;
}
body.b2b-dashboard-page .b2b-drawer-actions button,
body.b2b-dashboard-page .b2b-drawer-actions a{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
min-height:42px !important;
border:1px solid rgba(7,27,51,.1) !important;
border-radius:13px !important;
background:#f6f9fb !important;
color:#071b33 !important;
text-decoration:none !important;
font-weight:950 !important;
}
body.b2b-dashboard-page .b2b-drawer-actions .primary{
background:#071b33 !important;
color:#ffffff !important;
}
@media (max-width:900px){
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-metrics{
display:flex !important;
overflow-x:auto !important;
scroll-snap-type:x mandatory !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-metrics span{
min-width:150px !important;
scroll-snap-align:start !important;
}
body.b2b-dashboard-page .b2b-reservation-toolbar{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-reservation-card{
grid-template-columns:132px minmax(0,1fr) !important;
gap:10px !important;
padding:10px !important;
border-radius:18px !important;
}
body.b2b-dashboard-page .b2b-reservation-card figure{
min-height:132px !important;
}
body.b2b-dashboard-page .b2b-reservation-title b{
font-size:16px !important;
}
body.b2b-dashboard-page .b2b-reservation-body dl{
grid-template-columns:1fr 1fr !important;
}
body.b2b-dashboard-page .b2b-reservation-mini-timeline{
grid-template-columns:repeat(5,72px) !important;
overflow-x:auto !important;
padding-bottom:4px !important;
}
body.b2b-dashboard-page .b2b-reservation-actions{
flex-wrap:wrap !important;
justify-content:flex-start !important;
}
}
@media (max-width:520px){
body.b2b-dashboard-page .b2b-customer-portal{
padding:0 10px !important;
}
body.b2b-dashboard-page .b2b-customer-portal-hero{
grid-template-columns:54px minmax(0,1fr) !important;
padding:14px !important;
}
body.b2b-dashboard-page .b2b-customer-portal-hero button{
grid-column:1 / -1 !important;
width:100% !important;
}
body.b2b-dashboard-page .b2b-account-logo-large{
width:54px !important;
height:54px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-reservation-card{
grid-template-columns:104px minmax(0,1fr) !important;
}
body.b2b-dashboard-page .b2b-reservation-card figure{
min-height:118px !important;
border-radius:14px !important;
}
body.b2b-dashboard-page .b2b-reservation-status-row mark{
font-size:9px !important;
padding:6px 8px !important;
}
body.b2b-dashboard-page .b2b-reservation-body dl{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-reservation-actions button{
min-height:38px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-drawer-facts,
body.b2b-dashboard-page .b2b-drawer-summary{
grid-template-columns:1fr !important;
}
}
body.b2b-dashboard-page .b2b-profile-completion{
display:grid !important;
grid-template-columns:auto minmax(180px,1fr) auto !important;
gap:14px !important;
align-items:center !important;
margin:14px 0 !important;
padding:14px !important;
border-radius:18px !important;
background:#071b33 !important;
color:#ffffff !important;
}
body.b2b-dashboard-page .b2b-profile-completion b{
display:block !important;
font-size:24px !important;
line-height:1 !important;
}
body.b2b-dashboard-page .b2b-profile-completion span{
color:rgba(255,255,255,.72) !important;
font-size:12px !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-profile-completion i{
height:9px !important;
overflow:hidden !important;
border-radius:999px !important;
background:rgba(255,255,255,.16) !important;
}
body.b2b-dashboard-page .b2b-profile-completion i span{
display:block !important;
height:100% !important;
border-radius:999px !important;
background:linear-gradient(90deg,#22c66d,#16a1c8) !important;
}
body.b2b-dashboard-page .b2b-profile-grid{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:14px !important;
}
body.b2b-dashboard-page .b2b-profile-grid article b,
body.b2b-dashboard-page .b2b-profile-grid article span,
body.b2b-dashboard-page .b2b-profile-grid article p{
display:block !important;
margin-top:6px !important;
}
body.b2b-dashboard-page .b2b-profile-grid article b{
font-size:20px !important;
}
body.b2b-dashboard-page .b2b-profile-wide{
grid-column:1 / -1 !important;
}
body.b2b-dashboard-page .b2b-profile-tags{
display:flex !important;
flex-wrap:wrap !important;
gap:8px !important;
margin-top:10px !important;
}
body.b2b-dashboard-page .b2b-profile-tags span,
body.b2b-dashboard-page .b2b-profile-tags em{
padding:7px 10px !important;
border-radius:999px !important;
background:#eef8fa !important;
color:#0b737a !important;
font-size:12px !important;
font-style:normal !important;
font-weight:900 !important;
}
body.b2b-dashboard-page .b2b-profile-form{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:12px !important;
padding:16px !important;
border:1px solid rgba(7,27,51,.08) !important;
border-radius:22px !important;
background:#ffffff !important;
box-shadow:0 14px 38px rgba(7,27,51,.07) !important;
}
body.b2b-dashboard-page .b2b-profile-form label{
display:grid !important;
gap:6px !important;
color:#435567 !important;
font-size:12px !important;
font-weight:950 !important;
}
body.b2b-dashboard-page .b2b-profile-form input,
body.b2b-dashboard-page .b2b-profile-form textarea{
width:100% !important;
border:1px solid rgba(7,27,51,.12) !important;
border-radius:13px !important;
padding:11px 12px !important;
color:#071b33 !important;
font:inherit !important;
background:#f9fbfc !important;
}
body.b2b-dashboard-page .b2b-profile-form input[readonly]{
background:#edf3f6 !important;
color:#5e7081 !important;
}
body.b2b-dashboard-page .b2b-profile-form .wide,
body.b2b-dashboard-page .b2b-profile-form-actions{
grid-column:1 / -1 !important;
}
body.b2b-dashboard-page .b2b-logo-upload span{
width:70px !important;
height:70px !important;
overflow:hidden !important;
border-radius:18px !important;
background:#f1f7f8 !important;
}
body.b2b-dashboard-page .b2b-logo-upload img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
body.b2b-dashboard-page .b2b-logo-upload small{
color:#5f7480 !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.35 !important;
}
body.b2b-dashboard-page .b2b-profile-form-actions{
display:flex !important;
gap:12px !important;
align-items:center !important;
}
body.b2b-dashboard-page .b2b-profile-form-actions span{
color:#118c93 !important;
font-size:13px !important;
font-weight:850 !important;
}
/* Premium journey back controls for shipment details and request flows. */
body.b2b-dashboard-page .b2b-journey-back{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
min-height:38px !important;
border:1px solid rgba(7,27,51,.1) !important;
border-radius:999px !important;
padding:0 14px !important;
background:rgba(255,255,255,.96) !important;
color:#071b33 !important;
box-shadow:0 12px 28px rgba(7,27,51,.13) !important;
font-size:12px !important;
font-weight:1000 !important;
letter-spacing:0 !important;
cursor:pointer !important;
z-index:30 !important;
transition:transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
body.b2b-dashboard-page .b2b-journey-back:hover{
transform:translateY(-1px) !important;
background:#ffffff !important;
box-shadow:0 16px 34px rgba(7,27,51,.18) !important;
}
body.b2b-dashboard-page .b2b-journey-back i{
width:24px !important;
height:24px !important;
display:grid !important;
place-items:center !important;
border-radius:50% !important;
background:#eaf8fa !important;
color:#118c93 !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-detail-back-pill{
position:sticky !important;
top:12px !important;
left:18px !important;
margin:14px 0 -2px 18px !important;
width:max-content !important;
}
body.b2b-dashboard-page .b2b-access-back{
position:absolute !important;
top:12px !important;
left:12px !important;
}
body.b2b-dashboard-page .b2b-access-modal.is-account-access .b2b-access-back{
display:none !important;
}
body.b2b-dashboard-page .b2b-commercial-back{
position:sticky !important;
top:10px !important;
margin:0 0 10px !important;
width:max-content !important;
}
body.b2b-dashboard-page .b2b-access-card.b2b-quick-card{
padding-top:58px !important;
}
body.b2b-dashboard-page .b2b-access-modal.is-account-access .b2b-access-card.b2b-quick-card{
padding-top:22px !important;
}
body.b2b-dashboard-page .b2b-access-modal .b2b-access-close{
z-index:31 !important;
}
@media (max-width:780px){
body.b2b-dashboard-page .b2b-customer-portal{
margin:20px auto !important;
padding:0 12px !important;
}
body.b2b-dashboard-page .b2b-customer-portal-hero,
body.b2b-dashboard-page .b2b-reservation-card,
body.b2b-dashboard-page .b2b-profile-completion{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-customer-metrics,
body.b2b-dashboard-page .b2b-profile-grid,
body.b2b-dashboard-page .b2b-profile-form{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-reservation-body dl{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
body.b2b-dashboard-page .b2b-reservation-card figure{
min-height:190px !important;
}
body.b2b-dashboard-page .b2b-detail-back-pill{
top:8px !important;
margin:10px 0 -2px 10px !important;
}
body.b2b-dashboard-page .b2b-journey-back{
min-height:36px !important;
padding:0 12px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-journey-back i{
width:22px !important;
height:22px !important;
}
}
/* 2026-08-24 brand asset lock: keep the approved FishMarket.ai mark exact. */
.brand img,
.footer-brand .brand img,
body.b2b-dashboard-page .b2b-dash-brand img,
.b2b-dash-brand img,
.b2b-quick-brand img{
object-fit:contain !important;
object-position:center !important;
background:#fff !important;
}
.brand img,
body.b2b-dashboard-page .b2b-dash-brand img,
.b2b-dash-brand img{
padding:1px !important;
}
/* 2026-08-24 customer company KYC center. */
body.b2b-dashboard-page .b2b-kyc-shell{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:18px;
align-items:start;
}
body.b2b-dashboard-page .b2b-kyc-content{
min-width:0;
}
body.b2b-dashboard-page .b2b-kyc-hero{
background:linear-gradient(135deg,#061d34 0%,#0b3452 58%,#0d7f89 100%);
}
body.b2b-dashboard-page .b2b-kyc-hero small{
display:inline-flex;
align-items:center;
gap:7px;
color:#c9f7ef;
}
body.b2b-dashboard-page .b2b-kyc-hero em{
display:block;
margin-top:8px;
color:#dff9ff;
font-style:normal;
font-size:.84rem;
font-weight:800;
}
body.b2b-dashboard-page .b2b-kyc-progress-inline{
width:min(320px,100%);
height:8px;
margin-top:12px;
border-radius:999px;
overflow:hidden;
background:rgba(255,255,255,.22);
}
body.b2b-dashboard-page .b2b-kyc-progress-inline span{
display:block;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,#35d39f,#e8c05a);
}
body.b2b-dashboard-page .b2b-profile-tabs{
display:flex;
gap:9px;
overflow-x:auto;
padding:10px 2px 4px;
scrollbar-width:thin;
}
body.b2b-dashboard-page .b2b-profile-tabs a{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:7px;
min-height:38px;
padding:9px 13px;
border-radius:999px;
border:1px solid rgba(12,88,103,.14);
background:#fff;
color:#0a2740;
font-size:.78rem;
font-weight:900;
text-decoration:none;
box-shadow:0 10px 26px rgba(10,39,64,.08);
}
body.b2b-dashboard-page .b2b-profile-tabs a.is-active{
background:#082541;
color:#fff;
}
body.b2b-dashboard-page .b2b-kyc-aside{
display:grid;
gap:12px;
position:sticky;
top:92px;
}
body.b2b-dashboard-page .b2b-kyc-ring-card,
body.b2b-dashboard-page .b2b-kyc-checklist,
body.b2b-dashboard-page .b2b-kyc-upgrade,
body.b2b-dashboard-page .b2b-kyc-center{
border:1px solid rgba(12,88,103,.13);
border-radius:20px;
background:#fff;
box-shadow:0 18px 44px rgba(10,39,64,.1);
}
body.b2b-dashboard-page .b2b-kyc-ring-card{
display:flex;
gap:14px;
align-items:center;
padding:16px;
}
body.b2b-dashboard-page .b2b-kyc-ring{
width:86px;
aspect-ratio:1;
flex:0 0 auto;
border-radius:50%;
display:grid;
place-items:center;
background:conic-gradient(#0aa6a9 var(--kyc-progress),#eaf4f4 0);
position:relative;
}
body.b2b-dashboard-page .b2b-kyc-ring::before{
content:"";
position:absolute;
inset:9px;
border-radius:inherit;
background:#fff;
}
body.b2b-dashboard-page .b2b-kyc-ring b,
body.b2b-dashboard-page .b2b-kyc-ring span{
position:relative;
z-index:1;
display:block;
text-align:center;
color:#06213b;
}
body.b2b-dashboard-page .b2b-kyc-ring b{
font-size:1.15rem;
line-height:1;
}
body.b2b-dashboard-page .b2b-kyc-ring span{
margin-top:24px;
font-size:.62rem;
font-weight:900;
text-transform:uppercase;
}
body.b2b-dashboard-page .b2b-kyc-ring-card small,
body.b2b-dashboard-page .b2b-kyc-title span{
color:#0d7f89;
font-size:.72rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
}
body.b2b-dashboard-page .b2b-kyc-ring-card strong{
display:block;
margin-top:5px;
color:#061d34;
font-size:1rem;
}
body.b2b-dashboard-page .b2b-kyc-ring-card p,
body.b2b-dashboard-page .b2b-kyc-upgrade p,
body.b2b-dashboard-page .b2b-kyc-title p,
body.b2b-dashboard-page .b2b-kyc-signatory p{
margin:.35rem 0 0;
color:#5f7280;
font-size:.82rem;
line-height:1.45;
}
body.b2b-dashboard-page .b2b-kyc-checklist{
padding:14px;
display:grid;
gap:9px;
}
body.b2b-dashboard-page .b2b-kyc-checklist span{
display:flex;
align-items:center;
gap:9px;
color:#5a6f7d;
font-size:.82rem;
font-weight:850;
}
body.b2b-dashboard-page .b2b-kyc-checklist i{
width:22px;
height:22px;
border-radius:50%;
display:grid;
place-items:center;
background:#eef5f5;
color:#789;
font-size:.68rem;
}
body.b2b-dashboard-page .b2b-kyc-checklist .is-done i{
background:#dff8ed;
color:#0b8a5a;
}
body.b2b-dashboard-page .b2b-kyc-upgrade{
padding:16px;
color:#082541;
background:linear-gradient(135deg,#fff 0%,#eefbfb 100%);
}
body.b2b-dashboard-page .b2b-kyc-upgrade i{
color:#d9a735;
font-size:1.35rem;
}
body.b2b-dashboard-page .b2b-kyc-upgrade b{
display:block;
margin-top:8px;
}
body.b2b-dashboard-page .b2b-kyc-center{
margin-top:16px;
padding:18px;
}
body.b2b-dashboard-page .b2b-kyc-title h3{
margin:.3rem 0;
color:#061d34;
font-size:1.45rem;
}
body.b2b-dashboard-page .b2b-kyc-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin:15px 0;
}
body.b2b-dashboard-page .b2b-kyc-stats span{
min-width:0;
padding:12px;
border-radius:15px;
background:#f4fbfb;
border:1px solid rgba(13,127,137,.12);
}
body.b2b-dashboard-page .b2b-kyc-stats b{
display:block;
color:#06213b;
font-size:1.05rem;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
body.b2b-dashboard-page .b2b-kyc-stats small{
color:#667985;
font-size:.72rem;
font-weight:850;
}
body.b2b-dashboard-page .b2b-kyc-main{
display:grid;
grid-template-columns:minmax(0,1fr) 340px;
gap:16px;
align-items:start;
}
body.b2b-dashboard-page .b2b-kyc-doc-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
body.b2b-dashboard-page .b2b-kyc-doc{
min-width:0;
border:1px solid rgba(10,39,64,.1);
border-radius:16px;
padding:13px;
background:#fff;
}
body.b2b-dashboard-page .b2b-kyc-doc.is-required{
border-color:rgba(13,127,137,.24);
box-shadow:inset 3px 0 0 #0d7f89;
}
body.b2b-dashboard-page .b2b-kyc-doc.is-optional-doc{
background:linear-gradient(180deg,#fff,#f8fbfb);
}
body.b2b-dashboard-page .b2b-kyc-doc-head{
display:grid;
grid-template-columns:38px minmax(0,1fr) auto;
gap:10px;
align-items:center;
}
body.b2b-dashboard-page .b2b-kyc-doc-head > span{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:13px;
background:#eefafa;
color:#0d7f89;
}
body.b2b-dashboard-page .b2b-kyc-doc-head b{
display:block;
color:#09233b;
font-size:.86rem;
}
body.b2b-dashboard-page .b2b-kyc-doc-head sup{
color:#c28b13;
font-size:.95rem;
margin-left:3px;
}
body.b2b-dashboard-page .b2b-kyc-doc-head small,
body.b2b-dashboard-page .b2b-kyc-doc p{
color:#697b87;
font-size:.72rem;
}
body.b2b-dashboard-page .b2b-kyc-doc-head em{
border-radius:999px;
padding:5px 8px;
background:#edf4f5;
color:#536774;
font-size:.65rem;
font-style:normal;
font-weight:950;
white-space:nowrap;
}
body.b2b-dashboard-page .b2b-kyc-doc.is-uploaded em,
body.b2b-dashboard-page .b2b-kyc-doc.is-review em{
background:#fff3cf;
color:#8a6307;
}
body.b2b-dashboard-page .b2b-kyc-doc.is-verified em{
background:#dff8ed;
color:#08734d;
}
body.b2b-dashboard-page .b2b-kyc-doc.is-action em,
body.b2b-dashboard-page .b2b-kyc-doc.is-rejected em,
body.b2b-dashboard-page .b2b-kyc-doc.is-expired em{
background:#ffe5e5;
color:#9e2222;
}
body.b2b-dashboard-page .b2b-kyc-doc-actions{
display:flex;
gap:8px;
align-items:center;
flex-wrap:wrap;
margin-top:10px;
}
body.b2b-dashboard-page .b2b-kyc-doc-actions label,
body.b2b-dashboard-page .b2b-kyc-doc-actions button,
body.b2b-dashboard-page .b2b-kyc-submit-row button{
border:0;
border-radius:12px;
padding:9px 12px;
background:#082541;
color:#fff;
font-size:.75rem;
font-weight:950;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-kyc-doc-actions button{
background:#edf6f6;
color:#0a354a;
}
body.b2b-dashboard-page .b2b-kyc-doc-actions button.danger{
background:#fff1f1;
color:#a12828;
}
body.b2b-dashboard-page .b2b-kyc-doc-actions button:disabled{
opacity:.45;
cursor:not-allowed;
}
body.b2b-dashboard-page .b2b-kyc-doc-actions input{
display:none;
}
body.b2b-dashboard-page .b2b-kyc-side-stack{
display:grid;
gap:12px;
align-content:start;
}
body.b2b-dashboard-page .b2b-kyc-ai-card{
padding:16px;
border-radius:18px;
background:linear-gradient(145deg,#f6fffc,#eefafa);
border:1px solid rgba(13,127,137,.16);
box-shadow:0 16px 34px rgba(8,37,65,.08);
}
body.b2b-dashboard-page .b2b-kyc-ai-card > span{
display:inline-flex;
align-items:center;
gap:7px;
border-radius:999px;
padding:6px 10px;
background:#fff;
color:#0d7f89;
font-size:.68rem;
font-weight:1000;
text-transform:uppercase;
letter-spacing:.06em;
}
body.b2b-dashboard-page .b2b-kyc-ai-card h3{
margin:12px 0 6px;
color:#06213b;
}
body.b2b-dashboard-page .b2b-kyc-ai-card p,
body.b2b-dashboard-page .b2b-kyc-ai-card small{
color:#5f7480;
font-size:.76rem;
font-weight:750;
line-height:1.5;
}
body.b2b-dashboard-page .b2b-kyc-ai-card dl{
display:grid;
gap:8px;
margin:12px 0;
}
body.b2b-dashboard-page .b2b-kyc-ai-fields{
display:grid;
gap:8px;
margin:12px 0;
}
body.b2b-dashboard-page .b2b-kyc-ai-fields label{
display:grid;
gap:5px;
padding:9px 10px;
border-radius:12px;
background:#fff;
border:1px solid rgba(10,39,64,.08);
}
body.b2b-dashboard-page .b2b-kyc-ai-fields span{
color:#6c7d86;
font-size:.68rem;
font-weight:950;
}
body.b2b-dashboard-page .b2b-kyc-ai-fields input{
width:100%;
min-height:34px;
border:1px solid rgba(13,127,137,.14);
border-radius:10px;
padding:7px 9px;
background:#f9fdfd;
color:#09233b;
font:inherit;
font-size:.76rem;
font-weight:850;
}
body.b2b-dashboard-page .b2b-kyc-ai-fields input:focus{
outline:2px solid rgba(13,127,137,.18);
border-color:rgba(13,127,137,.36);
background:#fff;
}
body.b2b-dashboard-page .b2b-kyc-ai-confirm{
display:flex;
gap:8px;
align-items:flex-start;
padding:10px;
margin:10px 0;
border-radius:12px;
background:#fff;
border:1px solid rgba(194,139,19,.18);
color:#243f52;
font-size:.74rem;
font-weight:900;
line-height:1.45;
}
body.b2b-dashboard-page .b2b-kyc-ai-confirm input{
width:16px;
min-width:16px;
height:16px;
margin-top:2px;
accent-color:#0d7f89;
}
body.b2b-dashboard-page .b2b-kyc-ai-card dl div{
display:grid;
grid-template-columns:minmax(105px,.65fr) minmax(0,1fr);
gap:8px;
align-items:center;
padding:8px 10px;
border-radius:12px;
background:#fff;
}
body.b2b-dashboard-page .b2b-kyc-ai-card dt{
color:#6c7d86;
font-size:.68rem;
font-weight:900;
}
body.b2b-dashboard-page .b2b-kyc-ai-card dd{
margin:0;
color:#09233b;
font-size:.75rem;
font-weight:950;
overflow-wrap:anywhere;
}
body.b2b-dashboard-page .b2b-kyc-signatory{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
padding:16px;
border-radius:18px;
background:#f8fcfc;
border:1px solid rgba(13,127,137,.12);
}
body.b2b-dashboard-page .b2b-kyc-signatory h3{
margin:.2rem 0;
color:#06213b;
}
body.b2b-dashboard-page .b2b-kyc-signatory label{
display:grid;
gap:6px;
color:#435764;
font-size:.72rem;
font-weight:900;
}
body.b2b-dashboard-page .b2b-kyc-signatory input,
body.b2b-dashboard-page .b2b-kyc-signatory select{
width:100%;
min-height:38px;
border:1px solid rgba(10,39,64,.13);
border-radius:12px;
padding:8px 10px;
background:#fff;
color:#082541;
font:inherit;
}
body.b2b-dashboard-page .b2b-kyc-signatory .wide,
body.b2b-dashboard-page .b2b-kyc-declaration,
body.b2b-dashboard-page .b2b-kyc-submit-row{
grid-column:1/-1;
}
body.b2b-dashboard-page .b2b-kyc-declaration{
display:flex !important;
grid-template-columns:none !important;
align-items:flex-start;
gap:9px;
padding:10px;
border-radius:12px;
background:#fff;
}
body.b2b-dashboard-page .b2b-kyc-declaration input{
width:16px;
min-height:16px;
margin-top:2px;
}
body.b2b-dashboard-page .b2b-kyc-submit-row{
display:flex;
gap:9px;
align-items:center;
flex-wrap:wrap;
}
body.b2b-dashboard-page .b2b-kyc-submit-row button.primary{
background:#0d7f89;
}
body.b2b-dashboard-page .b2b-kyc-submit-row small{
color:#0b756c;
font-weight:850;
}
@media (max-width:1180px){
body.b2b-dashboard-page .b2b-kyc-shell,
body.b2b-dashboard-page .b2b-kyc-main{
grid-template-columns:1fr;
}
body.b2b-dashboard-page .b2b-kyc-aside{
position:static;
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-kyc-aside,
body.b2b-dashboard-page .b2b-kyc-stats,
body.b2b-dashboard-page .b2b-kyc-doc-grid{
grid-template-columns:1fr;
}
body.b2b-dashboard-page .b2b-kyc-center{
padding:14px;
}
body.b2b-dashboard-page .b2b-kyc-signatory{
grid-template-columns:1fr;
}
body.b2b-dashboard-page .b2b-kyc-doc-head{
grid-template-columns:34px minmax(0,1fr);
}
body.b2b-dashboard-page .b2b-kyc-doc-head em{
grid-column:2;
justify-self:start;
}
}
/* 2026-08-24 B2B marketplace title bar: keep it in the page, not floating over every section. */
body.b2b-dashboard-page .b2b-dash-content > .b2b-title-row{
position:relative !important;
top:auto !important;
z-index:1 !important;
margin:0 0 14px !important;
padding:0 !important;
border-radius:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
backdrop-filter:none !important;
}
body.b2b-dashboard-page .b2b-dash-content > .b2b-title-row > div:first-child{
padding-left:0 !important;
}
body.b2b-dashboard-page .b2b-dash-content > .b2b-title-row h1{
font-size:clamp(22px,2vw,31px) !important;
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-dash-content > .b2b-title-row{
top:auto !important;
margin-left:0 !important;
margin-right:0 !important;
padding:0 !important;
border-radius:0 !important;
}
}
@media (max-width:480px){
body.b2b-dashboard-page .b2b-dash-content > .b2b-title-row h1{
font-size:20px !important;
}
body.b2b-dashboard-page .b2b-dash-content > .b2b-title-row p{
font-size:11px !important;
line-height:1.35 !important;
}
}
/* 2026-08-24: keep the View Details full-container action visually premium. */
body.b2b-dashboard-page .b2b-compact-buy-actions button.primary[data-commercial-full="1"]{
position:relative !important;
isolation:isolate;
overflow:hidden !important;
border:1px solid rgba(91,183,255,.58) !important;
background:
radial-gradient(circle at 30% 0%, rgba(96,190,255,.25), transparent 34%),
linear-gradient(135deg, #061a38 0%, #092b58 58%, #061b36 100%) !important;
color:#ffffff !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 18px rgba(37,148,255,.20),
0 12px 26px rgba(3,20,44,.16) !important;
text-shadow:0 1px 8px rgba(255,255,255,.16);
}
body.b2b-dashboard-page .b2b-compact-buy-actions button.primary[data-commercial-full="1"]:hover,
body.b2b-dashboard-page .b2b-compact-buy-actions button.primary[data-commercial-full="1"]:focus-visible{
border-color:rgba(179,232,255,.95) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.18) inset,
0 0 18px rgba(73,188,255,.58),
0 0 34px rgba(73,188,255,.24),
0 16px 30px rgba(3,20,44,.22) !important;
transform:translateY(-1px);
}
/* Pre-Buy full-container submission page: premium navy/gold treatment inside the form only. */
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-request-shell-panel{
border-color:rgba(214,161,54,.36);
background:
linear-gradient(180deg,#ffffff 0%,#fffaf0 100%),
radial-gradient(circle at top right, rgba(214,161,54,.18), transparent 34%);
box-shadow:0 28px 90px rgba(3,20,36,.34), inset 0 0 0 1px rgba(214,161,54,.12);
}
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-request-badges i,
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-request-message label i,
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-privacy-line i{
color:#d6a136;
}
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-request-steps .is-active b,
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-request-steps .is-complete b,
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-email-verification > div:first-child span{
border-color:#d6a136;
background:#061b33;
color:#ffffff;
}
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-request-accordion,
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-request-message,
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-prebuy-allocation,
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-delivery-window{
border-color:rgba(214,161,54,.28);
box-shadow:0 12px 32px rgba(126,84,17,.08);
}
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-request-accordion summary > span,
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-request-focus-head > span{
background:linear-gradient(135deg,#061b33,#0b315f);
color:#d6a136;
}
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-smart-field label i,
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-prebuy-allocation > label i{
color:#d6a136;
}
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-review-submit{
background:
radial-gradient(circle at 24% 0%, rgba(255,236,180,.34), transparent 34%),
linear-gradient(135deg,#061b33 0%,#0b315f 58%,#061b33 100%);
color:#ffffff;
border:1px solid rgba(214,161,54,.42);
box-shadow:0 14px 30px rgba(6,27,51,.22), 0 0 0 1px rgba(214,161,54,.12) inset;
}
body.b2b-dashboard-page .b2b-premium-request.b2b-request-shell.is-prebuy-mode .b2b-review-submit i{
color:#d6a136;
}
/* 2026-08-24 premium language selector and customer notification center. */
body.b2b-dashboard-page .b2b-language-btn,
body.b2b-dashboard-page .b2b-notification-btn{
min-height:38px;
border:1px solid rgba(255,255,255,.16);
border-radius:999px;
padding:0 12px;
background:rgba(255,255,255,.08);
color:#ffffff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
body.b2b-dashboard-page .b2b-language-btn{
display:inline-flex;
align-items:center;
gap:7px;
}
body.b2b-dashboard-page .b2b-language-btn b{
color:#fff;
font-size:12px;
}
body.b2b-dashboard-page .b2b-notification-btn{
display:grid;
place-items:center;
width:40px;
padding:0;
}
body.b2b-dashboard-page .b2b-notification-btn em{
position:absolute;
top:-7px;
right:-7px;
display:grid;
place-items:center;
min-width:20px;
height:20px;
padding:0 5px;
border-radius:999px;
background:#d8a236;
color:#071b33;
font-size:10px;
font-style:normal;
font-weight:1000;
box-shadow:0 0 0 2px #061b33;
}
body.b2b-dashboard-page .b2b-notification-btn em[hidden]{
display:none;
}
body.b2b-dashboard-page .b2b-language-panel,
body.b2b-dashboard-page .b2b-notification-panel{
position:fixed;
z-index:10020;
width:min(380px, calc(100vw - 24px));
border:1px solid rgba(10,39,64,.12);
border-radius:18px;
background:#ffffff;
color:#071b33;
box-shadow:0 24px 80px rgba(2,17,33,.22);
overflow:hidden;
}
body.b2b-dashboard-page .b2b-language-panel[hidden],
body.b2b-dashboard-page .b2b-notification-panel[hidden]{
display:none !important;
}
body.b2b-dashboard-page .b2b-popover-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:15px 16px;
background:linear-gradient(135deg,#061b33,#0a385f);
color:#fff;
}
body.b2b-dashboard-page .b2b-popover-head b{
display:block;
color:#fff;
font-size:15px;
}
body.b2b-dashboard-page .b2b-popover-head small{
display:block;
margin-top:3px;
color:#c9e9f5;
font-size:11px;
font-weight:800;
}
body.b2b-dashboard-page .b2b-notification-head button,
body.b2b-dashboard-page .b2b-notification-foot button{
border:1px solid rgba(214,161,54,.28);
border-radius:999px;
min-height:32px;
padding:0 12px;
background:#fff7e5;
color:#7a540b;
font-size:11px;
font-weight:950;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-language-list{
display:grid;
gap:8px;
padding:12px;
}
body.b2b-dashboard-page .b2b-language-list button{
display:grid;
grid-template-columns:34px minmax(0,1fr) 42px 24px;
align-items:center;
gap:10px;
min-height:52px;
border:1px solid rgba(10,39,64,.1);
border-radius:14px;
background:#fff;
color:#071b33;
cursor:pointer;
text-align:left;
}
body.b2b-dashboard-page .b2b-language-list button.is-active{
border-color:rgba(13,127,137,.38);
background:#eefafa;
box-shadow:inset 3px 0 0 #0d7f89;
}
body.b2b-dashboard-page .b2b-language-list button i{
opacity:0;
color:#0d7f89;
}
body.b2b-dashboard-page .b2b-language-list button.is-active i{
opacity:1;
}
body.b2b-dashboard-page .b2b-language-list button b,
body.b2b-dashboard-page .b2b-language-list button small{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
body.b2b-dashboard-page .b2b-notification-list,
body.b2b-dashboard-page .b2b-notification-page-list{
display:grid;
gap:9px;
padding:12px;
max-height:440px;
overflow:auto;
}
body.b2b-dashboard-page .b2b-notification-page-list{
max-height:none;
padding:0;
}
body.b2b-dashboard-page .b2b-notification-row{
display:grid;
grid-template-columns:38px minmax(0,1fr) auto;
gap:10px;
align-items:center;
padding:11px;
border:1px solid rgba(10,39,64,.1);
border-radius:14px;
background:#fff;
}
body.b2b-dashboard-page .b2b-notification-row.is-unread{
border-color:rgba(13,127,137,.24);
background:linear-gradient(180deg,#ffffff,#f3fbfb);
}
body.b2b-dashboard-page .b2b-notification-row > span{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:13px;
color:#0d7f89;
background:#eefafa;
}
body.b2b-dashboard-page .b2b-notification-row.is-success > span{ color:#0b8a5a; background:#e2f8ed; }
body.b2b-dashboard-page .b2b-notification-row.is-attention > span{ color:#9a6a12; background:#fff5d9; }
body.b2b-dashboard-page .b2b-notification-row.is-critical > span{ color:#a72a2a; background:#fff0f0; }
body.b2b-dashboard-page .b2b-notification-row.is-marketplace > span{ color:#0a5da8; background:#eef6ff; }
body.b2b-dashboard-page .b2b-notification-row b{
display:block;
color:#071b33;
font-size:13px;
}
body.b2b-dashboard-page .b2b-notification-row p{
margin:3px 0;
color:#506577;
font-size:12px;
font-weight:750;
line-height:1.35;
}
body.b2b-dashboard-page .b2b-notification-row small{
color:#758796;
font-size:10.5px;
font-weight:850;
}
body.b2b-dashboard-page .b2b-notification-row button{
border:0;
border-radius:999px;
min-height:30px;
padding:0 10px;
background:#061b33;
color:#fff;
font-size:10.5px;
font-weight:950;
cursor:pointer;
}
body.b2b-dashboard-page .b2b-notification-foot{
padding:0 12px 12px;
}
body.b2b-dashboard-page .b2b-notification-foot button{
width:100%;
}
body.b2b-dashboard-page .b2b-notification-empty{
display:grid;
place-items:center;
gap:6px;
min-height:150px;
padding:18px;
text-align:center;
color:#5b7080;
}
body.b2b-dashboard-page .b2b-notification-empty i{
color:#0d7f89;
font-size:28px;
}
body.b2b-dashboard-page .b2b-notification-center{
display:grid;
gap:14px;
margin:24px 0;
}
body.b2b-dashboard-page .b2b-notification-filters{
display:flex;
flex-wrap:wrap;
gap:8px;
}
body.b2b-dashboard-page .b2b-notification-filters button{
min-height:34px;
border:1px solid rgba(10,39,64,.1);
border-radius:999px;
padding:0 12px;
background:#fff;
color:#40596d;
font-size:12px;
font-weight:950;
}
body.b2b-dashboard-page .b2b-notification-filters button.is-active{
background:#061b33;
color:#fff;
}
body.b2b-dashboard-page .b2b-notification-preferences{
display:grid;
gap:9px;
padding:16px;
border:1px solid rgba(10,39,64,.1);
border-radius:18px;
background:#fff;
box-shadow:0 14px 38px rgba(7,27,51,.08);
}
body.b2b-dashboard-page .b2b-notification-preferences label{
display:flex;
align-items:center;
gap:8px;
color:#465d70;
font-size:13px;
font-weight:850;
}
body.b2b-dashboard-page.b2b-rtl{
direction:rtl;
}
body.b2b-dashboard-page.b2b-rtl .b2b-language-list button,
body.b2b-dashboard-page.b2b-rtl .b2b-notification-row{
text-align:right;
}
body.b2b-dashboard-page.b2b-rtl .b2b-sidebar,
body.b2b-dashboard-page.b2b-rtl .b2b-topbar,
body.b2b-dashboard-page.b2b-rtl .shipment-facts,
body.b2b-dashboard-page.b2b-rtl .b2b-container-facts{
direction:rtl;
}
body.b2b-dashboard-page.b2b-rtl .shipment-row,
body.b2b-dashboard-page.b2b-rtl .b2b-container-card,
body.b2b-dashboard-page.b2b-rtl .b2b-compact-buy-row{
direction:rtl;
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-language-panel,
body.b2b-dashboard-page .b2b-notification-panel{
left:12px !important;
right:12px !important;
top:78px !important;
width:auto;
max-height:calc(100vh - 100px);
}
body.b2b-dashboard-page .b2b-notification-row{
grid-template-columns:34px minmax(0,1fr);
}
body.b2b-dashboard-page .b2b-notification-row button{
grid-column:2;
justify-self:start;
}
body.b2b-dashboard-page.b2b-rtl .b2b-notification-row button{
justify-self:end;
}
}
/* Clear edit-profile picture upload control. */
body.b2b-dashboard-page .b2b-account-logo-large,
body.b2b-dashboard-page .b2b-account-logo-large img,
body.b2b-dashboard-page .b2b-account.is-signed-in .b2b-customer-avatar,
body.b2b-dashboard-page .b2b-account.is-signed-in .b2b-customer-avatar img{
object-fit:contain !important;
object-position:center !important;
}
body.b2b-dashboard-page .b2b-profile-completion button[data-profile-edit-toggle]{
min-height:42px !important;
border:1px solid rgba(214,161,54,.58) !important;
border-radius:999px !important;
padding:0 18px !important;
background:linear-gradient(135deg,#061b33,#0a3159) !important;
color:#ffffff !important;
box-shadow:0 14px 30px rgba(6,27,51,.22) !important;
font-size:13px !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-profile-completion button[data-profile-edit-toggle] i{
color:#f2c66d !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload{
position:relative !important;
grid-column:1 / -1 !important;
display:grid !important;
grid-template-columns:104px minmax(0,1fr) auto !important;
gap:12px 16px !important;
align-items:center !important;
min-height:124px !important;
padding:14px 16px !important;
border:1px solid rgba(17,140,147,.18) !important;
border-radius:22px !important;
background:linear-gradient(135deg,#f8fcfd,#eef8f8) !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.78),0 12px 30px rgba(7,27,51,.06) !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-frame{
position:relative !important;
grid-row:1 / span 2 !important;
width:104px !important;
height:104px !important;
overflow:visible !important;
border:1px solid rgba(7,27,51,.1) !important;
border-radius:26px !important;
background:#ffffff !important;
box-shadow:0 16px 34px rgba(7,27,51,.12) !important;
cursor:pointer !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-frame img{
width:100% !important;
height:100% !important;
padding:6px !important;
border-radius:26px !important;
background:#ffffff !important;
object-fit:contain !important;
object-position:center !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-frame > i{
position:absolute !important;
right:6px !important;
top:6px !important;
display:grid !important;
place-items:center !important;
width:32px !important;
height:32px !important;
border:3px solid #ffffff !important;
border-radius:999px !important;
background:linear-gradient(135deg,#061b33,#0a3159) !important;
color:#f2c66d !important;
box-shadow:0 10px 22px rgba(6,27,51,.28) !important;
font-size:13px !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-copy{
min-width:0 !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-actions{
grid-column:3 !important;
grid-row:1 / span 2 !important;
display:flex !important;
flex-direction:column !important;
gap:10px !important;
align-items:stretch !important;
justify-content:center !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-actions em,
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-actions .b2b-logo-remove{
white-space:nowrap !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-actions em{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
min-height:40px !important;
padding:0 14px !important;
border-radius:999px !important;
background:#061b33 !important;
color:#ffffff !important;
font-size:12px !important;
font-style:normal !important;
font-weight:1000 !important;
box-shadow:0 14px 28px rgba(6,27,51,.18) !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-actions em i{
color:#061b33 !important;
color:#f2c66d !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload b{
display:block !important;
margin-bottom:5px !important;
color:#061b33 !important;
font-size:15px !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload small{
display:block !important;
color:#5b6f7e !important;
font-size:12px !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload > em{
grid-column:3 !important;
grid-row:1 / span 2 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
min-height:40px !important;
padding:0 14px !important;
border-radius:999px !important;
background:#061b33 !important;
color:#ffffff !important;
font-size:12px !important;
font-style:normal !important;
font-weight:1000 !important;
box-shadow:0 14px 28px rgba(6,27,51,.18) !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload em i{
color:#f2c66d !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload .b2b-logo-remove{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
min-height:38px !important;
padding:0 12px !important;
border:1px solid rgba(198,61,61,.18) !important;
border-radius:999px !important;
background:#fff7f7 !important;
color:#9b2727 !important;
font-size:12px !important;
font-weight:1000 !important;
box-shadow:none !important;
cursor:pointer !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload .b2b-logo-remove:hover{
background:#ffecec !important;
border-color:rgba(198,61,61,.34) !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload input{
position:absolute !important;
width:1px !important;
height:1px !important;
opacity:0 !important;
pointer-events:none !important;
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload{
grid-template-columns:86px minmax(0,1fr) !important;
min-height:112px !important;
padding:12px !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-frame{
width:86px !important;
height:86px !important;
border-radius:22px !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-frame img{
border-radius:22px !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-actions{
grid-column:2 !important;
grid-row:auto !important;
flex-direction:row !important;
flex-wrap:wrap !important;
justify-content:flex-start !important;
justify-self:start !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-actions em,
body.b2b-dashboard-page .b2b-profile-form .b2b-logo-upload-actions .b2b-logo-remove{
min-height:32px !important;
padding:0 10px !important;
font-size:10px !important;
}
}
/* Owner-approved View Details header and action center. */
body.b2b-dashboard-page .b2b-exec-detail .b2b-detail-back-pill{
display:none !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar{
position:sticky !important;
top:0 !important;
z-index:24 !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:18px !important;
min-height:64px !important;
padding:14px 72px 14px 28px !important;
border-bottom:1px solid rgba(6,27,51,.08) !important;
background:rgba(255,255,255,.96) !important;
box-shadow:0 12px 32px rgba(7,27,51,.06) !important;
backdrop-filter:blur(18px) !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar a{
display:inline-flex !important;
align-items:center !important;
gap:9px !important;
min-height:38px !important;
padding:0 15px !important;
border:1px solid rgba(17,140,147,.18) !important;
border-radius:999px !important;
background:#f7fbfb !important;
color:#061b33 !important;
font-size:13px !important;
font-weight:1000 !important;
text-decoration:none !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar nav{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar button{
min-height:38px !important;
padding:0 15px !important;
border:1px solid rgba(6,27,51,.1) !important;
border-radius:999px !important;
background:#ffffff !important;
color:#061b33 !important;
font-size:12px !important;
font-weight:1000 !important;
box-shadow:0 10px 24px rgba(7,27,51,.07) !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar button.primary{
border-color:rgba(214,161,54,.28) !important;
background:linear-gradient(135deg,#061b33,#09294d) !important;
color:#ffffff !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar i,
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar button.primary i{
color:#d6a136 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-modal-close{
top:14px !important;
right:22px !important;
z-index:30 !important;
width:38px !important;
height:38px !important;
border:1px solid rgba(6,27,51,.1) !important;
background:#ffffff !important;
color:#061b33 !important;
box-shadow:0 12px 28px rgba(7,27,51,.12) !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-compact-exec-banner{
display:grid !important;
grid-template-columns:minmax(260px,.95fr) minmax(340px,1.25fr) minmax(220px,.7fr) !important;
align-items:stretch !important;
gap:18px !important;
margin:22px 28px 16px !important;
padding:18px !important;
border:1px solid rgba(6,27,51,.09) !important;
border-left:5px solid #d6a136 !important;
border-radius:20px !important;
background:#ffffff !important;
color:#061b33 !important;
box-shadow:0 18px 42px rgba(7,27,51,.08) !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-compact-exec-banner::before,
body.b2b-dashboard-page .b2b-exec-detail .b2b-compact-exec-banner::after{
display:none !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-shipment-id-block,
body.b2b-dashboard-page .b2b-exec-detail .b2b-status-block,
body.b2b-dashboard-page .b2b-exec-detail .b2b-shipment-metric-panel{
min-width:0 !important;
padding:14px !important;
border:1px solid rgba(6,27,51,.07) !important;
border-radius:16px !important;
background:linear-gradient(180deg,#ffffff,#fbfdfd) !important;
box-shadow:none !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-shipment-id-block > span{
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
width:auto !important;
padding:7px 10px !important;
border-radius:999px !important;
background:#eaf8f3 !important;
color:#157c54 !important;
font-size:11px !important;
font-weight:1000 !important;
letter-spacing:.03em !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-shipment-id-block h2{
margin:10px 0 6px !important;
color:#061b33 !important;
font-size:27px !important;
line-height:1.06 !important;
font-weight:1000 !important;
letter-spacing:0 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-shipment-id-block p{
display:flex !important;
align-items:center !important;
gap:8px !important;
margin:0 0 12px !important;
color:#5b6f7e !important;
font-size:13px !important;
font-weight:900 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-shipment-id-block p i{
color:#118c93 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-shipment-container-chip{
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
padding:8px 12px !important;
border:1px solid rgba(214,161,54,.28) !important;
border-radius:999px !important;
background:#fff9e8 !important;
color:#5a4012 !important;
font-size:12px !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-status-block small{
display:flex !important;
align-items:center !important;
gap:8px !important;
color:#7f620f !important;
font-size:11px !important;
font-style:normal !important;
font-weight:1000 !important;
letter-spacing:.04em !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-status-block small i{
color:#d6a136 !important;
font-size:9px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-status-block b{
display:block !important;
margin:8px 0 5px !important;
color:#061b33 !important;
font-size:21px !important;
line-height:1.15 !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-status-block em{
display:block !important;
max-width:560px !important;
color:#526879 !important;
font-size:13px !important;
line-height:1.45 !important;
font-style:normal !important;
font-weight:800 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-header-date-strip{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
margin-top:13px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-header-date-strip span{
display:block !important;
padding:9px 10px !important;
border:1px solid rgba(17,140,147,.13) !important;
border-radius:13px !important;
background:#f5fbfb !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-header-date-strip small{
margin:0 0 3px !important;
color:#75909c !important;
font-size:10px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-header-date-strip b{
margin:0 !important;
color:#061b33 !important;
font-size:12px !important;
line-height:1.2 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-shipment-metric-panel{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-shipment-metric-panel span{
display:block !important;
padding:10px 12px !important;
border:1px solid rgba(6,27,51,.08) !important;
border-radius:13px !important;
background:#ffffff !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-shipment-metric-panel small{
display:block !important;
margin-bottom:4px !important;
color:#7c8c97 !important;
font-size:10px !important;
font-weight:1000 !important;
letter-spacing:.04em !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-shipment-metric-panel b{
display:block !important;
color:#061b33 !important;
font-size:15px !important;
line-height:1.2 !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-center{
margin:16px 0 14px !important;
padding:16px !important;
border:1px solid rgba(214,161,54,.5) !important;
border-radius:20px !important;
background:linear-gradient(180deg,#ffffff,#fffaf0) !important;
box-shadow:0 18px 40px rgba(122,86,19,.08) !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-center-head{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
margin:0 0 12px !important;
padding:0 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-center-head h3{
margin:0 !important;
color:#061b33 !important;
font-size:14px !important;
letter-spacing:.08em !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-center-head p{
margin:3px 0 0 !important;
color:#6f7d86 !important;
font-size:12px !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-center-grid{
display:grid !important;
grid-template-columns:minmax(245px,1fr) minmax(245px,1fr) minmax(210px,.8fr) !important;
gap:12px !important;
align-items:stretch !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card{
display:grid !important;
grid-template-columns:44px minmax(0,1fr) !important;
gap:10px 12px !important;
align-content:start !important;
min-width:0 !important;
padding:14px !important;
border:1px solid rgba(6,27,51,.08) !important;
border-radius:17px !important;
background:#ffffff !important;
box-shadow:0 12px 28px rgba(7,27,51,.06) !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card > span{
display:grid !important;
place-items:center !important;
width:44px !important;
height:44px !important;
border-radius:14px !important;
background:#eef8f8 !important;
color:#118c93 !important;
font-size:18px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card-reserve > span{
background:#071b33 !important;
color:#f2c66d !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card b{
display:flex !important;
align-items:center !important;
flex-wrap:wrap !important;
gap:7px !important;
color:#061b33 !important;
font-size:15px !important;
line-height:1.2 !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card em{
display:inline-flex !important;
align-items:center !important;
min-height:21px !important;
padding:0 8px !important;
border-radius:999px !important;
background:#eaf8f3 !important;
color:#157c54 !important;
font-size:9px !important;
font-style:normal !important;
font-weight:1000 !important;
letter-spacing:.04em !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card small{
display:block !important;
margin-top:4px !important;
color:#6a7d89 !important;
font-size:12px !important;
line-height:1.35 !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card strong{
grid-column:1 / -1 !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
min-height:40px !important;
padding:9px 11px !important;
border-radius:13px !important;
background:#f7fbfb !important;
color:#061b33 !important;
font-size:14px !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card strong small{
margin:0 !important;
color:#118c93 !important;
font-size:10px !important;
text-align:right !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card button{
grid-column:1 / -1 !important;
min-height:42px !important;
border-radius:13px !important;
border:1px solid rgba(214,161,54,.42) !important;
background:#ffffff !important;
color:#061b33 !important;
font-size:12px !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card button.primary{
background:linear-gradient(135deg,#061b33,#09294d) !important;
color:#ffffff !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card button i{
color:#d6a136 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-divider{
display:none !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card-trust{
background:linear-gradient(135deg,#061b33,#0b3157) !important;
color:#ffffff !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card-trust b,
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card-trust small{
color:#ffffff !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card-trust ul{
grid-column:1 / -1 !important;
display:grid !important;
gap:7px !important;
margin:4px 0 0 !important;
padding:0 !important;
list-style:none !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card-trust li{
display:flex !important;
align-items:center !important;
gap:7px !important;
color:#eaf4f6 !important;
font-size:11px !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-card-trust li i{
color:#f2c66d !important;
}
@media (max-width:1120px){
body.b2b-dashboard-page .b2b-exec-detail .b2b-compact-exec-banner,
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-center-grid{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-divider{
width:100% !important;
height:1px !important;
color:transparent !important;
}
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar{
min-height:58px !important;
padding:10px 58px 10px 12px !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar a,
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar button{
min-height:34px !important;
padding:0 10px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-lux-topbar nav{
gap:6px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-modal-close{
top:10px !important;
right:12px !important;
width:34px !important;
height:34px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-compact-exec-banner{
margin:12px 10px !important;
padding:12px !important;
border-radius:18px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-shipment-id-block h2{
font-size:22px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-status-block b{
font-size:18px !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-header-date-strip{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-exec-detail .b2b-action-center{
padding:12px !important;
border-radius:18px !important;
}
}
/* Premium customer reservation control center. */
body.b2b-dashboard-page .b2b-customer-portal.is-reservations{
max-width:1180px !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-portal-hero{
grid-template-columns:64px minmax(0,1fr) auto !important;
min-height:118px !important;
border-radius:24px !important;
background:
radial-gradient(circle at 80% 12%, rgba(45,202,209,.24), transparent 34%),
linear-gradient(135deg,#061b33 0%,#09294d 62%,#0d7d8b 100%) !important;
box-shadow:0 22px 50px rgba(6,27,51,.18) !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-portal-hero h2{
font-size:30px !important;
letter-spacing:0 !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-metrics{
grid-template-columns:repeat(6,minmax(120px,1fr)) !important;
gap:10px !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-metrics span{
min-height:82px !important;
padding:13px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-metrics b{
font-size:22px !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-metrics small{
font-size:10px !important;
line-height:1.25 !important;
}
body.b2b-dashboard-page .b2b-reservation-toolbar{
grid-template-columns:minmax(260px,1fr) 174px 174px !important;
padding:10px !important;
border-radius:18px !important;
}
body.b2b-dashboard-page .b2b-reservation-toolbar label,
body.b2b-dashboard-page .b2b-reservation-toolbar input,
body.b2b-dashboard-page .b2b-reservation-toolbar select{
min-height:40px !important;
border-radius:13px !important;
font-size:12px !important;
}
body.b2b-dashboard-page .b2b-reservation-list{
gap:12px !important;
}
body.b2b-dashboard-page .b2b-reservation-card{
position:relative !important;
display:grid !important;
grid-template-columns:54px minmax(0,1fr) !important;
gap:14px !important;
align-items:start !important;
padding:16px !important;
overflow:hidden !important;
border:1px solid rgba(6,27,51,.08) !important;
border-radius:22px !important;
background:linear-gradient(180deg,#ffffff 0%,#fbfdfd 100%) !important;
box-shadow:0 16px 42px rgba(7,27,51,.07) !important;
}
body.b2b-dashboard-page .b2b-reservation-card::before{
content:"" !important;
position:absolute !important;
inset:0 auto 0 0 !important;
width:5px !important;
background:#d6a136 !important;
}
body.b2b-dashboard-page .b2b-reservation-card.is-pending::before{ background:#d6a136 !important; }
body.b2b-dashboard-page .b2b-reservation-card.is-confirmed::before{ background:#168e5f !important; }
body.b2b-dashboard-page .b2b-reservation-card.is-completed::before{ background:#1371c8 !important; }
body.b2b-dashboard-page .b2b-reservation-card.is-cancel-requested::before{ background:#7b56d9 !important; }
body.b2b-dashboard-page .b2b-reservation-card.is-closed::before{ background:#c44747 !important; }
body.b2b-dashboard-page .b2b-reservation-icon{
display:grid !important;
place-items:center !important;
width:54px !important;
height:54px !important;
border:1px solid rgba(214,161,54,.28) !important;
border-radius:18px !important;
background:linear-gradient(135deg,#fff9e8,#ffffff) !important;
color:#7a5b13 !important;
font-size:20px !important;
box-shadow:0 12px 26px rgba(214,161,54,.13) !important;
}
body.b2b-dashboard-page .b2b-reservation-body{
min-width:0 !important;
}
body.b2b-dashboard-page .b2b-reservation-head{
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:12px !important;
}
body.b2b-dashboard-page .b2b-reservation-title{
min-width:0 !important;
}
body.b2b-dashboard-page .b2b-reservation-title span{
display:inline-flex !important;
align-items:center !important;
margin:0 0 6px !important;
padding:5px 8px !important;
border-radius:999px !important;
background:#eef8f8 !important;
color:#118c93 !important;
font-size:10px !important;
font-weight:1000 !important;
letter-spacing:.04em !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-reservation-title b{
display:block !important;
margin:0 0 3px !important;
color:#061b33 !important;
font-size:18px !important;
line-height:1.15 !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-reservation-title small{
display:block !important;
max-width:100% !important;
overflow:hidden !important;
color:#536778 !important;
font-size:13px !important;
line-height:1.35 !important;
font-weight:900 !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page .b2b-reservation-status{
flex:0 0 auto !important;
min-height:30px !important;
padding:7px 10px !important;
border-radius:999px !important;
font-size:10px !important;
line-height:1 !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page .b2b-reservation-route{
display:flex !important;
align-items:center !important;
gap:8px !important;
margin:10px 0 11px !important;
color:#5d7180 !important;
font-size:12px !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-reservation-route i{
color:#118c93 !important;
}
body.b2b-dashboard-page .b2b-reservation-facts{
display:grid !important;
grid-template-columns:1.2fr .8fr .9fr .9fr !important;
gap:8px !important;
margin:0 0 12px !important;
}
body.b2b-dashboard-page .b2b-reservation-facts div{
min-width:0 !important;
padding:10px 11px !important;
border:1px solid rgba(6,27,51,.06) !important;
border-radius:14px !important;
background:#f7fbfb !important;
}
body.b2b-dashboard-page .b2b-reservation-facts dt{
color:#78909b !important;
font-size:9px !important;
font-weight:1000 !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-reservation-facts dd{
margin:4px 0 0 !important;
overflow:hidden !important;
color:#061b33 !important;
font-size:12px !important;
font-weight:1000 !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page .b2b-reservation-actions{
justify-content:flex-end !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-reservation-actions button.secondary{
min-height:38px !important;
padding:0 14px !important;
border:1px solid rgba(214,161,54,.3) !important;
border-radius:999px !important;
background:#061b33 !important;
color:#ffffff !important;
font-size:12px !important;
font-weight:1000 !important;
box-shadow:0 12px 24px rgba(6,27,51,.15) !important;
}
body.b2b-dashboard-page .b2b-reservation-actions button.primary{
min-height:38px !important;
padding:0 14px !important;
border:1px solid rgba(22,142,95,.22) !important;
border-radius:999px !important;
background:linear-gradient(135deg,#0b8a5a,#13a36d) !important;
color:#ffffff !important;
font-size:12px !important;
font-weight:1000 !important;
box-shadow:0 12px 24px rgba(13,125,91,.16) !important;
}
body.b2b-dashboard-page .b2b-reservation-actions button.primary i{
color:#ffffff !important;
}
body.b2b-dashboard-page .b2b-reservation-actions button.secondary i{
color:#f2c66d !important;
}
body.b2b-dashboard-page .b2b-reservation-actions .ghost{
display:grid !important;
place-items:center !important;
width:38px !important;
height:38px !important;
min-height:38px !important;
border-radius:50% !important;
background:#eef8f8 !important;
color:#061b33 !important;
}
body.b2b-dashboard-page .b2b-reservation-drawer-panel{
border-left:1px solid rgba(214,161,54,.28) !important;
background:linear-gradient(180deg,#ffffff,#fbfdfd) !important;
}
body.b2b-dashboard-page .b2b-reservation-drawer-panel h3{
font-size:24px !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page .b2b-drawer-summary{
grid-template-columns:1fr !important;
padding:14px !important;
border-radius:18px !important;
}
body.b2b-dashboard-page .b2b-drawer-summary b{
color:#061b33 !important;
font-size:17px !important;
}
@media (max-width:900px){
body.b2b-dashboard-page .b2b-reservation-toolbar{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-reservation-facts{
grid-template-columns:1fr 1fr !important;
}
}
@media (max-width:560px){
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-portal-hero{
grid-template-columns:52px minmax(0,1fr) !important;
min-height:auto !important;
padding:14px !important;
}
body.b2b-dashboard-page .b2b-customer-portal.is-reservations .b2b-customer-portal-hero button{
grid-column:1 / -1 !important;
width:100% !important;
}
body.b2b-dashboard-page .b2b-reservation-card{
grid-template-columns:42px minmax(0,1fr) !important;
gap:10px !important;
padding:12px !important;
border-radius:18px !important;
}
body.b2b-dashboard-page .b2b-reservation-icon{
width:42px !important;
height:42px !important;
border-radius:14px !important;
font-size:16px !important;
}
body.b2b-dashboard-page .b2b-reservation-head{
display:grid !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-reservation-title b{
font-size:15px !important;
}
body.b2b-dashboard-page .b2b-reservation-facts{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-reservation-actions{
justify-content:flex-start !important;
}
}
body.b2b-dashboard-page .b2b-postbooking-center{
margin:16px 0 14px !important;
padding:16px !important;
border:1px solid rgba(17,140,147,.18) !important;
border-radius:22px !important;
background:linear-gradient(180deg,#ffffff,#f3fbfb) !important;
box-shadow:0 18px 42px rgba(7,27,51,.08) !important;
}
body.b2b-dashboard-page .b2b-postbooking-head{
display:grid !important;
grid-template-columns:48px minmax(0,1fr) auto !important;
gap:12px !important;
align-items:center !important;
margin:0 0 13px !important;
}
body.b2b-dashboard-page .b2b-postbooking-head > span{
display:grid !important;
place-items:center !important;
width:48px !important;
height:48px !important;
border-radius:16px !important;
background:#e7f8ef !important;
color:#0b8a5a !important;
font-size:20px !important;
}
body.b2b-dashboard-page .b2b-postbooking-head h3{
margin:0 !important;
color:#061b33 !important;
font-size:18px !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-postbooking-head p{
margin:4px 0 0 !important;
color:#5d7180 !important;
font-size:12px !important;
line-height:1.4 !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-postbooking-grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
margin-bottom:12px !important;
}
body.b2b-dashboard-page .b2b-postbooking-grid article{
min-width:0 !important;
padding:13px !important;
border:1px solid rgba(6,27,51,.07) !important;
border-radius:16px !important;
background:#ffffff !important;
}
body.b2b-dashboard-page .b2b-postbooking-grid small{
display:block !important;
color:#78909b !important;
font-size:10px !important;
font-weight:1000 !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-postbooking-grid b{
display:block !important;
margin:5px 0 !important;
color:#061b33 !important;
font-size:15px !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-postbooking-grid p{
margin:0 !important;
color:#607382 !important;
font-size:12px !important;
line-height:1.35 !important;
font-weight:800 !important;
}
body.b2b-dashboard-page .b2b-postbooking-actions{
display:flex !important;
flex-wrap:wrap !important;
gap:9px !important;
}
body.b2b-dashboard-page .b2b-postbooking-actions button,
body.b2b-dashboard-page .b2b-postbooking-actions a{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
min-height:40px !important;
padding:0 14px !important;
border:1px solid rgba(6,27,51,.1) !important;
border-radius:999px !important;
background:#ffffff !important;
color:#061b33 !important;
font-size:12px !important;
font-weight:1000 !important;
text-decoration:none !important;
}
body.b2b-dashboard-page .b2b-postbooking-actions .primary{
border-color:rgba(214,161,54,.24) !important;
background:linear-gradient(135deg,#061b33,#09294d) !important;
color:#ffffff !important;
}
body.b2b-dashboard-page .b2b-postbooking-actions .primary i,
body.b2b-dashboard-page .b2b-postbooking-actions a i{
color:#f2c66d !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast{
position:fixed !important;
top:96px !important;
right:24px !important;
z-index:180 !important;
display:grid !important;
grid-template-columns:58px minmax(0,1fr) auto !important;
gap:14px !important;
align-items:center !important;
width:min(560px, calc(100vw - 32px)) !important;
padding:18px !important;
border:1px solid rgba(6,27,51,.08) !important;
border-radius:24px !important;
background:#ffffff !important;
box-shadow:0 26px 70px rgba(7,27,51,.22) !important;
opacity:0 !important;
transform:translateY(-12px) scale(.98) !important;
transition:opacity .22s ease, transform .22s ease !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast.is-visible{
opacity:1 !important;
transform:translateY(0) scale(1) !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast > span{
display:grid !important;
place-items:center !important;
width:58px !important;
height:58px !important;
border-radius:50% !important;
background:#e7f8ef !important;
color:#0b8a5a !important;
font-size:24px !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast.is-attention > span{
background:#fff4d7 !important;
color:#a26d08 !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast small,
body.b2b-dashboard-page .b2b-live-notification-toast b,
body.b2b-dashboard-page .b2b-live-notification-toast p,
body.b2b-dashboard-page .b2b-live-notification-toast em{
display:block !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast small{
color:#0b8a5a !important;
font-size:11px !important;
font-weight:1000 !important;
letter-spacing:.05em !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast b{
margin:4px 0 !important;
color:#061b33 !important;
font-size:18px !important;
line-height:1.15 !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast p{
margin:0 !important;
color:#536778 !important;
font-size:13px !important;
line-height:1.35 !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast em{
margin-top:8px !important;
color:#7d8d98 !important;
font-size:12px !important;
font-style:normal !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast nav button{
min-height:42px !important;
padding:0 16px !important;
border:0 !important;
border-radius:12px !important;
background:#061b33 !important;
color:#ffffff !important;
font-size:12px !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast nav button i{
margin-left:8px !important;
color:#f2c66d !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast .b2b-toast-close{
position:absolute !important;
top:12px !important;
right:12px !important;
display:grid !important;
place-items:center !important;
width:30px !important;
height:30px !important;
border:0 !important;
border-radius:50% !important;
background:#f0f5f7 !important;
color:#061b33 !important;
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-postbooking-head,
body.b2b-dashboard-page .b2b-postbooking-grid{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast{
top:82px !important;
right:12px !important;
left:12px !important;
grid-template-columns:46px minmax(0,1fr) !important;
padding:14px !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast nav{
grid-column:1 / -1 !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast nav button{
width:100% !important;
}
}
/* 2026-08-24 strict profile KYC progress and VIP partner journey. */
body.b2b-dashboard-page .b2b-kyc-shell{
grid-template-columns:minmax(0,1fr) 330px !important;
}
body.b2b-dashboard-page .b2b-kyc-hero{
background:#ffffff !important;
color:#061b33 !important;
border:1px solid rgba(8,37,65,.1) !important;
box-shadow:0 18px 44px rgba(8,37,65,.08) !important;
}
body.b2b-dashboard-page .b2b-kyc-hero small{
color:#119263 !important;
}
body.b2b-dashboard-page .b2b-kyc-hero h2,
body.b2b-dashboard-page .b2b-kyc-hero p,
body.b2b-dashboard-page .b2b-kyc-hero em{
color:#061b33 !important;
}
body.b2b-dashboard-page .b2b-kyc-hero em{
color:#527083 !important;
}
body.b2b-dashboard-page .b2b-kyc-progress-inline{
background:#e7eef2 !important;
}
body.b2b-dashboard-page .b2b-vip-journey-card{
margin:14px 0 12px !important;
padding:20px !important;
border:1px solid rgba(8,37,65,.1) !important;
border-radius:18px !important;
background:#ffffff !important;
box-shadow:0 16px 38px rgba(8,37,65,.08) !important;
color:#061b33 !important;
}
body.b2b-dashboard-page .b2b-vip-journey-head{
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:12px !important;
margin-bottom:8px !important;
}
body.b2b-dashboard-page .b2b-vip-journey-head span{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
color:#061b33 !important;
font-size:.86rem !important;
font-weight:1000 !important;
text-transform:uppercase !important;
}
body.b2b-dashboard-page .b2b-vip-journey-head span i{
color:#d5a33c !important;
}
body.b2b-dashboard-page .b2b-vip-journey-head em{
padding:7px 12px !important;
border-radius:999px !important;
background:#fff5da !important;
color:#9b690b !important;
font-style:normal !important;
font-size:.72rem !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-vip-journey-card p{
margin:0 0 18px !important;
color:#526c7e !important;
font-size:.82rem !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-vip-journey-steps{
position:relative !important;
display:grid !important;
grid-template-columns:repeat(5,minmax(0,1fr)) !important;
gap:10px !important;
isolation:isolate !important;
}
body.b2b-dashboard-page .b2b-vip-journey-steps::before,
body.b2b-dashboard-page .b2b-vip-journey-steps::after{
content:"" !important;
position:absolute !important;
left:8% !important;
right:8% !important;
top:30px !important;
height:3px !important;
border-radius:999px !important;
background:#e3eaf0 !important;
z-index:-2 !important;
}
body.b2b-dashboard-page .b2b-vip-journey-steps::after{
right:auto !important;
width:calc((84%) * var(--vip-progress, 0) / 100) !important;
background:linear-gradient(90deg,#18ad73,#3d7dff) !important;
z-index:-1 !important;
}
body.b2b-dashboard-page .b2b-vip-step{
min-width:0 !important;
display:grid !important;
justify-items:center !important;
gap:5px !important;
text-align:center !important;
}
body.b2b-dashboard-page .b2b-vip-step i{
width:60px !important;
height:60px !important;
display:grid !important;
place-items:center !important;
border:6px solid #f4f7fa !important;
border-radius:50% !important;
background:#f7fafc !important;
color:#8b9ba8 !important;
font-size:18px !important;
box-shadow:0 10px 22px rgba(8,37,65,.08) !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-complete i{
background:#16a66c !important;
border-color:#dff8ee !important;
color:#ffffff !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-active i{
background:#316dff !important;
border-color:#e5ecff !important;
color:#ffffff !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-action i{
background:#d99a21 !important;
border-color:#fff2cd !important;
color:#ffffff !important;
}
body.b2b-dashboard-page .b2b-vip-step b{
margin-top:-14px !important;
width:21px !important;
height:21px !important;
display:grid !important;
place-items:center !important;
border-radius:50% !important;
background:#ffffff !important;
color:#061b33 !important;
font-size:.68rem !important;
font-weight:1000 !important;
box-shadow:0 5px 14px rgba(8,37,65,.12) !important;
}
body.b2b-dashboard-page .b2b-vip-step strong{
color:#061b33 !important;
font-size:.76rem !important;
line-height:1.2 !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-vip-step small{
color:#638093 !important;
font-size:.68rem !important;
font-weight:900 !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-complete small{
color:#139461 !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-active small{
color:#316dff !important;
}
body.b2b-dashboard-page .b2b-vip-review-note{
display:flex !important;
gap:10px !important;
align-items:flex-start !important;
margin-top:18px !important;
padding:13px 14px !important;
border:1px solid rgba(49,109,255,.12) !important;
border-radius:13px !important;
background:#f4f8ff !important;
color:#254159 !important;
font-size:.78rem !important;
font-weight:850 !important;
line-height:1.45 !important;
}
body.b2b-dashboard-page .b2b-vip-review-note i{
color:#316dff !important;
margin-top:2px !important;
}
body.b2b-dashboard-page .b2b-kyc-ring-card em{
display:inline-flex !important;
margin-top:8px !important;
padding:5px 9px !important;
border-radius:999px !important;
background:#edf6fa !important;
color:#456173 !important;
font-size:.68rem !important;
font-style:normal !important;
font-weight:950 !important;
}
body.b2b-dashboard-page .b2b-kyc-ring span{
margin-top:20px !important;
}
body.b2b-dashboard-page .b2b-vip-unlock-card{
overflow:hidden !important;
border-color:rgba(215,165,60,.45) !important;
background:linear-gradient(145deg,#fff8df 0%,#ffffff 56%,#fff4ce 100%) !important;
text-align:center !important;
}
body.b2b-dashboard-page .b2b-vip-unlock-card > i{
font-size:3.1rem !important;
color:#d5a33c !important;
filter:drop-shadow(0 10px 18px rgba(213,163,60,.22)) !important;
}
body.b2b-dashboard-page .b2b-vip-unlock-card b{
margin-top:8px !important;
color:#b67b13 !important;
font-size:1.85rem !important;
line-height:1 !important;
}
body.b2b-dashboard-page .b2b-vip-unlock-card p{
color:#5e4d25 !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-vip-unlock-card ul{
display:grid !important;
gap:9px !important;
margin:16px 0 !important;
padding:14px 0 0 !important;
border-top:1px solid rgba(181,124,23,.18) !important;
list-style:none !important;
text-align:left !important;
}
body.b2b-dashboard-page .b2b-vip-unlock-card li{
display:flex !important;
align-items:center !important;
gap:9px !important;
color:#493d28 !important;
font-size:.78rem !important;
font-weight:900 !important;
}
body.b2b-dashboard-page .b2b-vip-unlock-card li i{
color:#bf861c !important;
}
body.b2b-dashboard-page .b2b-vip-unlock-card button{
width:100% !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:8px !important;
min-height:46px !important;
padding:10px 13px !important;
border:1px solid rgba(181,124,23,.18) !important;
border-radius:13px !important;
background:#fff5db !important;
color:#80540b !important;
font-size:.75rem !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-card{
position:relative !important;
padding:0 !important;
border:1px solid rgba(205,147,33,.32) !important;
border-radius:20px !important;
background:
radial-gradient(circle at 50% 14%, rgba(219,157,38,.1), transparent 34%),
linear-gradient(180deg,#fffdf8 0%,#fff8e8 58%,#fff2d6 100%) !important;
color:#6c430b !important;
box-shadow:0 16px 38px rgba(8,37,65,.08), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-card::before{
content:"" !important;
position:absolute !important;
inset:-42% -30% auto -30% !important;
height:90px !important;
background:linear-gradient(90deg,transparent,rgba(210,151,35,.07),transparent) !important;
transform:rotate(-12deg) translateX(-70%) !important;
animation:b2bVipBonusSweep 14s ease-in-out infinite !important;
pointer-events:none !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-card.is-redeemed{
background:linear-gradient(180deg,#fafffb 0%,#effbf4 58%,#e4f7eb 100%) !important;
border-color:rgba(82,190,132,.55) !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-card.is-locked,
body.b2b-dashboard-page .b2b-vip-bonus-card.is-review,
body.b2b-dashboard-page .b2b-vip-bonus-card.is-pending{
background:linear-gradient(180deg,#fffdf8 0%,#fff8e8 58%,#fff2d6 100%) !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-card.is-first-unlock .b2b-vip-bonus-orb{
animation:b2bVipDiamondUnlock 1.4s ease-out 1, b2bVipDiamondFloat 8s ease-in-out 1.4s infinite !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-hero{
position:relative !important;
display:grid !important;
justify-items:center !important;
gap:7px !important;
padding:26px 18px 20px !important;
overflow:hidden !important;
isolation:isolate !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-hero::after{
content:"" !important;
position:absolute !important;
inset:auto -20% -48px -20% !important;
height:110px !important;
background:radial-gradient(circle, rgba(255,235,165,.24), transparent 64%) !important;
z-index:-1 !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond{
position:relative !important;
display:grid !important;
place-items:center !important;
width:128px !important;
height:100px !important;
margin:0 auto 4px !important;
color:#c58a1b !important;
filter:drop-shadow(0 14px 18px rgba(122,77,8,.13)) !important;
transform-origin:50% 52% !important;
animation:b2bVipPremiumTurn 12s ease-in-out infinite !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond.is-mini{
width:60px !important;
height:60px !important;
margin:0 !important;
padding:7px !important;
border:6px solid #fff6df !important;
border-radius:50% !important;
background:#ffffff !important;
filter:drop-shadow(0 10px 18px rgba(8,37,65,.08)) !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond svg{
width:100% !important;
height:100% !important;
overflow:visible !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond .diamond-base{
fill:#c58a1b !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond .diamond-top-left,
body.b2b-dashboard-page .b2b-vip-premium-diamond .diamond-right{
fill:#f1c56c !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond .diamond-top-mid,
body.b2b-dashboard-page .b2b-vip-premium-diamond .diamond-center{
fill:#d99d2d !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond .diamond-top-right{
fill:#fff0b8 !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond .diamond-left{
fill:#a86d12 !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond .diamond-line{
fill:none !important;
stroke:rgba(255,250,230,.42) !important;
stroke-width:1.4 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond .spark{
position:absolute !important;
width:5px !important;
height:5px !important;
border-radius:50% !important;
background:#f2c66d !important;
box-shadow:0 0 7px rgba(242,198,109,.18) !important;
opacity:.12 !important;
animation:b2bVipPremiumSpark 8.5s ease-in-out infinite !important;
pointer-events:none !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond .spark-one{
top:20px !important;
right:12px !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond .spark-two{
left:17px !important;
bottom:20px !important;
animation-delay:3.1s !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond.is-mini .spark{
display:none !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-card.is-locked .b2b-vip-premium-diamond,
body.b2b-dashboard-page .b2b-vip-bonus-card.is-review .b2b-vip-premium-diamond,
body.b2b-dashboard-page .b2b-vip-bonus-card.is-pending .b2b-vip-premium-diamond{
opacity:.9 !important;
filter:drop-shadow(0 10px 15px rgba(122,77,8,.08)) saturate(.9) !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-orb{
position:relative !important;
width:88px !important;
height:88px !important;
display:grid !important;
place-items:center !important;
border-radius:24px !important;
background:
linear-gradient(135deg,rgba(255,250,230,.36),rgba(224,178,79,.14) 38%,rgba(118,80,11,.14)),
radial-gradient(circle at 34% 24%,#fff6cf,#e3bd68 38%,#b47a19 70%,#69430d 100%) !important;
box-shadow:0 10px 20px rgba(74,46,8,.14), inset 0 1px 6px rgba(255,255,255,.22) !important;
transform:rotate(45deg) !important;
animation:b2bVipDiamondFloat 8s ease-in-out infinite !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-orb::before,
body.b2b-dashboard-page .b2b-vip-bonus-orb::after{
content:"" !important;
position:absolute !important;
width:5px !important;
height:5px !important;
border-radius:50% !important;
background:#fff0bd !important;
box-shadow:0 0 7px rgba(255,240,189,.18) !important;
opacity:.16 !important;
pointer-events:none !important;
animation:b2bVipSoftTwinkle 7.5s ease-in-out infinite !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-orb::before{
left:8px !important;
top:18px !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-orb::after{
right:14px !important;
bottom:14px !important;
animation-delay:2.4s !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-orb > i{
color:#fff0bd !important;
font-size:42px !important;
filter:drop-shadow(0 5px 8px rgba(99,56,0,.16)) !important;
transform:rotate(-45deg) !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-orb em{
position:absolute !important;
right:12px !important;
top:12px !important;
width:8px !important;
height:8px !important;
border-radius:50% !important;
background:#fff5d1 !important;
box-shadow:0 0 7px 1px rgba(255,245,209,.14) !important;
animation:b2bVipSpark 7.5s ease-in-out infinite !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-hero small{
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
padding:6px 10px !important;
border-radius:999px !important;
background:rgba(190,130,16,.1) !important;
color:#7d520d !important;
font-size:.68rem !important;
font-weight:1000 !important;
text-transform:uppercase !important;
letter-spacing:.08em !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-hero strong{
color:#7b4907 !important;
font-size:2.38rem !important;
line-height:1 !important;
letter-spacing:0 !important;
text-shadow:none !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-hero b{
margin:0 !important;
color:#8b5a0d !important;
font-size:1.08rem !important;
line-height:1.15 !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-hero p{
margin:0 !important;
color:#80633a !important;
font-size:.78rem !important;
font-weight:900 !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-state{
margin:0 14px 12px !important;
padding:13px !important;
border-radius:15px !important;
background:rgba(255,255,255,.86) !important;
text-align:left !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.75) !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-state span{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
color:#7c540d !important;
font-size:.78rem !important;
font-weight:1000 !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-state p{
margin:7px 0 0 !important;
color:#3e321c !important;
font-size:.76rem !important;
line-height:1.45 !important;
font-weight:850 !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-card.is-unlocked .b2b-vip-bonus-state span,
body.b2b-dashboard-page .b2b-vip-bonus-card.is-redeemed .b2b-vip-bonus-state span{
color:#147a52 !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-card .b2b-vip-bonus-terms{
margin:0 14px 14px !important;
border-radius:13px !important;
background:rgba(255,255,255,.72) !important;
border:1px solid rgba(203,145,32,.18) !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-card .b2b-vip-bonus-terms summary{
cursor:pointer !important;
padding:10px 12px !important;
color:#7d520d !important;
font-size:.74rem !important;
font-weight:1000 !important;
list-style:none !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-card .b2b-vip-bonus-terms p{
margin:0 !important;
padding:0 12px 12px !important;
color:#725a34 !important;
font-size:.72rem !important;
line-height:1.45 !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-card .b2b-vip-bonus-history{
display:block !important;
margin:-3px 14px 12px !important;
color:#ffffff !important;
font-size:.7rem !important;
font-style:normal !important;
font-weight:950 !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-vip-final{
position:relative !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-vip-final > i{
background:linear-gradient(145deg,#2b1d08,#d6a33b 62%,#fff3bc) !important;
color:#ffffff !important;
border-color:#fff1c7 !important;
box-shadow:0 12px 30px rgba(214,163,59,.28) !important;
animation:b2bVipStepGlow 3.8s ease-in-out infinite !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-vip-final > .b2b-vip-premium-diamond{
background:#ffffff !important;
border-color:#fff0c4 !important;
box-shadow:0 10px 22px rgba(8,37,65,.08), inset 0 0 0 1px rgba(205,147,33,.16) !important;
animation:b2bVipPremiumTurn 12s ease-in-out infinite !important;
}
body.b2b-dashboard-page .b2b-vip-reward-cue{
position:absolute !important;
top:-5px !important;
right:20% !important;
width:25px !important;
height:25px !important;
display:grid !important;
place-items:center !important;
border-radius:50% !important;
background:#fff6d8 !important;
color:#b8790d !important;
box-shadow:0 8px 18px rgba(181,121,13,.2) !important;
}
body.b2b-dashboard-page .b2b-vip-reward-cue i{
width:auto !important;
height:auto !important;
border:0 !important;
background:transparent !important;
color:inherit !important;
box-shadow:none !important;
font-size:11px !important;
animation:none !important;
}
@keyframes b2bVipBonusSweep{
0%, 58%{ transform:rotate(-12deg) translateX(-70%); opacity:0; }
68%{ opacity:.16; }
82%, 100%{ transform:rotate(-12deg) translateX(72%); opacity:0; }
}
@keyframes b2bVipDiamondFloat{
0%,100%{ transform:rotate(45deg) translateY(0); }
50%{ transform:rotate(47deg) translateY(-2px); }
}
@keyframes b2bVipDiamondUnlock{
0%{ transform:scale(.94) rotate(40deg); filter:brightness(.98); }
45%{ transform:scale(1.02) rotate(49deg); filter:brightness(1.03); }
100%{ transform:scale(1) rotate(45deg); filter:brightness(1); }
}
@keyframes b2bVipSpark{
0%,100%{ transform:scale(.78); opacity:.1; }
44%{ transform:scale(1.08); opacity:.24; }
70%{ transform:scale(.88); opacity:.14; }
}
@keyframes b2bVipSoftTwinkle{
0%,100%{ transform:scale(.74); opacity:.08; }
42%{ transform:scale(1.18); opacity:.24; }
68%{ transform:scale(.86); opacity:.12; }
}
@keyframes b2bVipPremiumTurn{
0%,16%,100%{ transform:rotate(-2deg); }
48%{ transform:rotate(3deg); }
70%{ transform:rotate(0deg); }
}
@keyframes b2bVipPremiumSpark{
0%,100%{ transform:scale(.72); opacity:.07; }
46%{ transform:scale(1.08); opacity:.22; }
68%{ transform:scale(.88); opacity:.1; }
}
@keyframes b2bVipStepGlow{
0%,100%{ filter:brightness(1); }
50%{ filter:brightness(1.18); }
}
@media (prefers-reduced-motion:reduce){
body.b2b-dashboard-page .b2b-vip-bonus-card::before,
body.b2b-dashboard-page .b2b-vip-bonus-orb,
body.b2b-dashboard-page .b2b-vip-bonus-orb em,
body.b2b-dashboard-page .b2b-vip-premium-diamond,
body.b2b-dashboard-page .b2b-vip-premium-diamond .spark,
body.b2b-dashboard-page .b2b-vip-step.is-vip-final > .b2b-vip-premium-diamond,
body.b2b-dashboard-page .b2b-vip-step.is-vip-final > .b2b-vip-premium-diamond::after,
body.b2b-dashboard-page .b2b-vip-step.is-vip-final > i{
animation:none !important;
}
}
@media (max-width:1180px){
body.b2b-dashboard-page .b2b-kyc-shell{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-kyc-aside{
position:static !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-vip-journey-card{
padding:15px !important;
}
body.b2b-dashboard-page .b2b-vip-journey-steps{
grid-template-columns:1fr !important;
gap:9px !important;
}
body.b2b-dashboard-page .b2b-vip-journey-steps::before,
body.b2b-dashboard-page .b2b-vip-journey-steps::after{
display:none !important;
}
body.b2b-dashboard-page .b2b-vip-step{
grid-template-columns:44px 22px minmax(0,1fr) auto !important;
justify-items:start !important;
align-items:center !important;
text-align:left !important;
}
body.b2b-dashboard-page .b2b-vip-step i{
width:44px !important;
height:44px !important;
border-width:4px !important;
font-size:15px !important;
}
body.b2b-dashboard-page .b2b-vip-step b{
margin-top:0 !important;
}
body.b2b-dashboard-page .b2b-vip-step small{
justify-self:end !important;
}
body.b2b-dashboard-page .b2b-kyc-aside{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-hero strong{
font-size:2rem !important;
}
body.b2b-dashboard-page .b2b-vip-reward-cue{
position:static !important;
grid-column:4 !important;
grid-row:1 !important;
justify-self:end !important;
}
}
/* 2026-08-24 customer account dropdown, red bell, and language polish. */
body.b2b-dashboard-page .b2b-account-card-head{
grid-template-columns:40px minmax(0,1fr) !important;
padding:12px !important;
min-height:auto !important;
}
body.b2b-dashboard-page .b2b-account-card-head > span{
width:40px !important;
height:40px !important;
display:grid !important;
place-items:center !important;
border-radius:14px !important;
background:rgba(255,255,255,.1) !important;
border:1px solid rgba(255,255,255,.18) !important;
}
body.b2b-dashboard-page .b2b-account-card-head > span i{
width:auto !important;
height:auto !important;
background:transparent !important;
color:#f2c66d !important;
font-size:22px !important;
}
body.b2b-dashboard-page .b2b-account-card-head img{
display:none !important;
}
body.b2b-dashboard-page .b2b-notification-btn{
position:relative !important;
background:#fff5f5 !important;
border-color:rgba(214,35,44,.28) !important;
color:#d6232c !important;
box-shadow:0 10px 24px rgba(214,35,44,.12), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
body.b2b-dashboard-page .b2b-notification-btn > i{
color:#d6232c !important;
font-size:16px !important;
transform-origin:50% 0 !important;
animation:b2bBellSoft 3.8s ease-in-out infinite !important;
}
body.b2b-dashboard-page .b2b-notification-btn.has-unread > i{
animation:b2bBellRing 1.45s ease-in-out infinite !important;
}
body.b2b-dashboard-page .b2b-notification-btn em{
background:#d6232c !important;
color:#ffffff !important;
box-shadow:0 0 0 2px #ffffff, 0 8px 16px rgba(214,35,44,.24) !important;
}
body.b2b-dashboard-page .b2b-language-btn{
background:#ffffff !important;
border-color:rgba(8,37,65,.14) !important;
color:#061b33 !important;
box-shadow:0 10px 22px rgba(8,37,65,.08) !important;
}
body.b2b-dashboard-page .b2b-language-btn b,
body.b2b-dashboard-page .b2b-language-btn i{
color:#061b33 !important;
}
body.b2b-dashboard-page .b2b-language-list button{
min-height:52px !important;
}
body.b2b-dashboard-page.b2b-rtl .b2b-topbar,
body.b2b-dashboard-page.b2b-rtl .b2b-account-dropdown a,
body.b2b-dashboard-page.b2b-rtl .b2b-account-dropdown button{
direction:rtl !important;
}
@keyframes b2bBellRing{
0%, 52%, 100%{ transform:rotate(0deg); }
8%{ transform:rotate(15deg); }
16%{ transform:rotate(-13deg); }
24%{ transform:rotate(10deg); }
32%{ transform:rotate(-7deg); }
40%{ transform:rotate(4deg); }
}
@keyframes b2bBellSoft{
0%, 76%, 100%{ transform:rotate(0deg) scale(1); }
82%{ transform:rotate(7deg) scale(1.04); }
88%{ transform:rotate(-6deg) scale(1.04); }
94%{ transform:rotate(3deg) scale(1.02); }
}
/* 2026-08-24 professional English/Arabic localization and RTL behavior. */
body.b2b-dashboard-page.b2b-rtl{
direction:rtl !important;
text-align:right !important;
}
body.b2b-dashboard-page.b2b-rtl .b2b-dash-main,
body.b2b-dashboard-page.b2b-rtl .b2b-sidebar-panel,
body.b2b-dashboard-page.b2b-rtl .b2b-modal-card,
body.b2b-dashboard-page.b2b-rtl .b2b-request-shell-panel,
body.b2b-dashboard-page.b2b-rtl .b2b-customer-portal,
body.b2b-dashboard-page.b2b-rtl .b2b-notification-panel,
body.b2b-dashboard-page.b2b-rtl .b2b-language-panel{
direction:rtl !important;
text-align:right !important;
}
body.b2b-dashboard-page.b2b-rtl .b2b-topbar,
body.b2b-dashboard-page.b2b-rtl .b2b-page-identity,
body.b2b-dashboard-page.b2b-rtl .b2b-side-nav a,
body.b2b-dashboard-page.b2b-rtl .b2b-side-tool,
body.b2b-dashboard-page.b2b-rtl .b2b-help-card,
body.b2b-dashboard-page.b2b-rtl .b2b-account-dropdown a,
body.b2b-dashboard-page.b2b-rtl .b2b-account-dropdown button,
body.b2b-dashboard-page.b2b-rtl .b2b-notification-row,
body.b2b-dashboard-page.b2b-rtl .b2b-language-list button{
direction:rtl !important;
}
body.b2b-dashboard-page.b2b-rtl .b2b-side-tool em i,
body.b2b-dashboard-page.b2b-rtl .b2b-detail-back-pill i,
body.b2b-dashboard-page.b2b-rtl [data-close-shipment-modal] .fa-arrow-left,
body.b2b-dashboard-page.b2b-rtl .b2b-search button .fa-arrow-right,
body.b2b-dashboard-page.b2b-rtl .fa-chevron-right{
transform:scaleX(-1) !important;
}
body.b2b-dashboard-page.b2b-rtl input,
body.b2b-dashboard-page.b2b-rtl textarea,
body.b2b-dashboard-page.b2b-rtl select{
text-align:right !important;
}
body.b2b-dashboard-page.b2b-rtl input[type="email"],
body.b2b-dashboard-page.b2b-rtl input[type="tel"],
body.b2b-dashboard-page.b2b-rtl input[inputmode="numeric"],
body.b2b-dashboard-page.b2b-rtl input[autocomplete="one-time-code"],
body.b2b-dashboard-page.b2b-rtl input[name*="trn"],
body.b2b-dashboard-page.b2b-rtl input[name*="email"],
body.b2b-dashboard-page.b2b-rtl input[name*="phone"],
body.b2b-dashboard-page.b2b-rtl .b2b-header-date-strip b,
body.b2b-dashboard-page.b2b-rtl .b2b-shipment-id-block h2,
body.b2b-dashboard-page.b2b-rtl .b2b-shipment-container-chip,
body.b2b-dashboard-page.b2b-rtl .b2b-shipment-metric-panel b,
body.b2b-dashboard-page.b2b-rtl .b2b-account-dropdown em,
body.b2b-dashboard-page.b2b-rtl [dir="ltr"]{
direction:ltr !important;
unicode-bidi:isolate !important;
text-align:left !important;
}
body.b2b-dashboard-page.b2b-rtl .b2b-language-panel,
body.b2b-dashboard-page.b2b-rtl .b2b-notification-panel{
box-shadow:0 26px 70px rgba(5,23,43,.2) !important;
}
body.b2b-dashboard-page.b2b-rtl .b2b-language-list button i{
margin-right:auto !important;
margin-left:0 !important;
}
/* 2026-08-24 clean customer account screens: reservations/profile should not show the marketplace behind them. */
body.b2b-dashboard-page.b2b-account-clean-view .b2b-title-row,
body.b2b-dashboard-page.b2b-account-clean-view .b2b-market-visual,
body.b2b-dashboard-page.b2b-account-clean-view .b2b-floating-map-btn,
body.b2b-dashboard-page.b2b-account-clean-view .b2b-market-search-row,
body.b2b-dashboard-page.b2b-account-clean-view .b2b-mobile-approved-filters,
body.b2b-dashboard-page.b2b-account-clean-view .b2b-mobile-request-strip,
body.b2b-dashboard-page.b2b-account-clean-view #all-containers,
body.b2b-dashboard-page.b2b-account-clean-view .b2b-bottom-grid{
display:none !important;
}
body.b2b-dashboard-page.b2b-account-clean-view [data-b2b-customer-workspace]{
display:block !important;
margin-top:18px !important;
}
body.b2b-dashboard-page.b2b-account-clean-view .b2b-customer-portal{
min-height:calc(100vh - 150px) !important;
}
/* 2026-08-24 premium profile journey polish and compact KYC draft layout. */
body.b2b-dashboard-page .b2b-vip-journey-steps::after{
background:linear-gradient(90deg,#18ad73 0%,#18ad73 58%,#2c8df4 100%) !important;
box-shadow:0 0 0 1px rgba(24,173,115,.12),0 0 18px rgba(24,173,115,.22) !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-locked i,
body.b2b-dashboard-page .b2b-vip-step.is-locked b{
background:#f6f8fa !important;
color:#9badb9 !important;
box-shadow:none !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-vip-final > .b2b-vip-premium-diamond{
position:relative !important;
overflow:visible !important;
background:#ffffff !important;
border-color:rgba(255,232,173,.58) !important;
color:#c58a1b !important;
border-radius:50% !important;
animation:b2bVipPremiumTurn 12s ease-in-out infinite !important;
box-shadow:0 10px 20px rgba(8,37,65,.08),inset 0 0 0 1px rgba(205,147,33,.14) !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-vip-final > .b2b-vip-premium-diamond::after{
content:"" !important;
position:absolute !important;
inset:-5px !important;
border-radius:50% !important;
border:1px solid rgba(242,198,109,.12) !important;
animation:b2bVipHalo 7s ease-in-out infinite !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-vip-final strong{
color:#9a6509 !important;
}
body.b2b-dashboard-page .b2b-vip-step.is-vip-final small{
color:#ad760e !important;
}
/* 2026-08-24: freeze the Global Seafood Marketplace top header on desktop. */
@media (min-width:921px){
body.b2b-dashboard-page .b2b-dash-main{
padding-top:64px !important;
}
body.b2b-dashboard-page .b2b-topbar{
position:fixed !important;
top:0 !important;
left:88px !important;
right:0 !important;
min-height:64px !important;
z-index:95 !important;
box-shadow:0 14px 32px rgba(7,27,51,.12) !important;
backdrop-filter:blur(18px) !important;
-webkit-backdrop-filter:blur(18px) !important;
transition:left .24s ease,width .24s ease !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-open .b2b-topbar{
left:292px !important;
}
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-topbar{
left:88px !important;
}
}
body.b2b-dashboard-page .b2b-profile-completion{
grid-template-columns:minmax(120px,auto) minmax(220px,1fr) auto !important;
padding:16px 18px !important;
border:1px solid rgba(242,198,109,.24) !important;
background:linear-gradient(135deg,#061b33 0%,#092642 54%,#0b3848 100%) !important;
box-shadow:0 18px 42px rgba(6,27,51,.18),inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.b2b-dashboard-page .b2b-profile-completion > div{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
body.b2b-dashboard-page .b2b-profile-completion > div b{
min-width:58px !important;
height:58px !important;
display:grid !important;
place-items:center !important;
border-radius:18px !important;
background:rgba(255,255,255,.1) !important;
color:#ffffff !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important;
font-size:21px !important;
}
body.b2b-dashboard-page .b2b-profile-completion > i{
height:12px !important;
background:rgba(255,255,255,.18) !important;
box-shadow:inset 0 1px 2px rgba(0,0,0,.16) !important;
}
body.b2b-dashboard-page .b2b-profile-completion > i span{
background:linear-gradient(90deg,#20c878,#31a7ff,#f2c66d) !important;
box-shadow:0 0 18px rgba(49,167,255,.28) !important;
}
body.b2b-dashboard-page .b2b-profile-completion button[data-profile-edit-toggle]{
min-height:44px !important;
padding:0 20px !important;
border-color:rgba(242,198,109,.48) !important;
background:linear-gradient(135deg,#ffffff,#fff6df) !important;
color:#061b33 !important;
box-shadow:0 14px 28px rgba(0,0,0,.14) !important;
}
body.b2b-dashboard-page .b2b-profile-completion button[data-profile-edit-toggle] i{
color:#b87810 !important;
}
body.b2b-dashboard-page .b2b-kyc-center{
padding:16px !important;
}
body.b2b-dashboard-page .b2b-kyc-title{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
gap:8px 16px !important;
align-items:center !important;
}
body.b2b-dashboard-page .b2b-kyc-title span,
body.b2b-dashboard-page .b2b-kyc-title p{
grid-column:1 / -1 !important;
}
body.b2b-dashboard-page .b2b-kyc-title h3{
margin:0 !important;
font-size:1.24rem !important;
}
body.b2b-dashboard-page .b2b-kyc-stats{
grid-template-columns:repeat(4,minmax(120px,1fr)) !important;
margin:12px 0 !important;
}
body.b2b-dashboard-page .b2b-kyc-main{
grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr) !important;
gap:14px !important;
}
body.b2b-dashboard-page .b2b-kyc-doc-grid{
gap:10px !important;
}
body.b2b-dashboard-page .b2b-kyc-doc{
padding:11px !important;
border-radius:14px !important;
}
body.b2b-dashboard-page .b2b-kyc-doc-head{
grid-template-columns:34px minmax(0,1fr) auto !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-kyc-doc-head > span{
width:34px !important;
height:34px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page .b2b-kyc-ai-card,
body.b2b-dashboard-page .b2b-kyc-signatory{
border-radius:16px !important;
box-shadow:0 12px 26px rgba(8,37,65,.07) !important;
}
body.b2b-dashboard-page .b2b-kyc-signatory{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
padding:14px !important;
background:linear-gradient(180deg,#ffffff,#f5fbfb) !important;
}
body.b2b-dashboard-page .b2b-kyc-signatory > div{
grid-column:1 / -1 !important;
padding-bottom:8px !important;
border-bottom:1px solid rgba(13,127,137,.1) !important;
}
@keyframes b2bVipDiamondSpin{
0%,100%{ transform:rotate(45deg) scale(1); }
50%{ transform:rotate(53deg) scale(1.015); }
}
@keyframes b2bVipDiamondBlink{
0%,100%{ filter:brightness(1) saturate(1); }
50%{ filter:brightness(1.03) saturate(1.04); }
}
@keyframes b2bVipHalo{
0%,100%{ opacity:.08; transform:scale(.98); }
50%{ opacity:.2; transform:scale(1.015); }
}
@media (max-width:1180px){
body.b2b-dashboard-page .b2b-kyc-main{
grid-template-columns:1fr !important;
}
}
@media (max-width:760px){
body.b2b-dashboard-page .b2b-profile-completion{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-kyc-title,
body.b2b-dashboard-page .b2b-kyc-signatory{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-kyc-stats{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
/* 2026-08-24 final mobile stabilization: compact alerts, stable search and clean detail flows. */
@media (max-width:767px){
body.b2b-dashboard-page .b2b-live-notification-toast{
top:calc(env(safe-area-inset-top, 0px) + 72px) !important;
left:12px !important;
right:12px !important;
width:auto !important;
max-width:none !important;
min-height:0 !important;
max-height:94px !important;
grid-template-columns:34px minmax(0, 1fr) !important;
gap:9px !important;
align-items:center !important;
padding:9px 38px 9px 10px !important;
border-radius:17px !important;
overflow:hidden !important;
box-shadow:0 16px 38px rgba(7,27,51,.18) !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast > span{
width:34px !important;
height:34px !important;
min-width:34px !important;
font-size:15px !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast small{
font-size:9px !important;
line-height:1 !important;
letter-spacing:.04em !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast b{
display:-webkit-box !important;
margin:2px 0 1px !important;
max-height:28px !important;
overflow:hidden !important;
font-size:12.5px !important;
line-height:1.12 !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast p{
display:-webkit-box !important;
max-height:28px !important;
overflow:hidden !important;
font-size:10.5px !important;
line-height:1.22 !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast em,
body.b2b-dashboard-page .b2b-live-notification-toast nav{
display:none !important;
}
body.b2b-dashboard-page .b2b-live-notification-toast .b2b-toast-close{
top:8px !important;
right:8px !important;
width:24px !important;
height:24px !important;
font-size:11px !important;
}
body.b2b-dashboard-page.b2b-mobile-flow-active .b2b-live-notification-toast,
body.b2b-dashboard-page.b2b-mobile-flow-active .b2b-floating-map-btn{
display:none !important;
}
body.b2b-dashboard-page .b2b-market-search-row{
position:relative !important;
z-index:120 !important;
overflow:visible !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
overflow:visible !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-grand-search-panel{
position:absolute !important;
left:0 !important;
right:0 !important;
top:calc(100% + 7px) !important;
bottom:auto !important;
width:100% !important;
max-height:104px !important;
padding:5px !important;
overflow:hidden !important;
border-radius:13px !important;
z-index:999 !important;
}
body.b2b-dashboard-page .b2b-grand-search-option{
min-height:44px !important;
grid-template-columns:30px minmax(0, 1fr) !important;
gap:7px !important;
padding:5px 6px !important;
}
body.b2b-dashboard-page .b2b-grand-search-option img,
body.b2b-dashboard-page .b2b-grand-search-option > i{
width:30px !important;
height:30px !important;
border-radius:9px !important;
}
body.b2b-dashboard-page .b2b-grand-search-option b{
font-size:11.5px !important;
}
body.b2b-dashboard-page .b2b-grand-search-option small{
font-size:9px !important;
}
body.b2b-dashboard-page .b2b-market-banner-window,
body.b2b-dashboard-page .b2b-market-banner-track{
max-width:100% !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide{
width:100% !important;
min-width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
body.b2b-dashboard-page .b2b-market-filters{
max-width:100% !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scrollbar-width:none !important;
}
body.b2b-dashboard-page .b2b-market-filters::-webkit-scrollbar{
display:none !important;
}
}
/* 2026-08-24 owner mobile correction: one stable app header, shorter shipment cards, no mobile overlays. */
@media (max-width:767px){
body.b2b-dashboard-page{
--b2b-mobile-header-h: calc(62px + env(safe-area-inset-top, 0px));
padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px)) !important;
overflow-x:hidden !important;
}
body.b2b-dashboard-page .b2b-app-shell{
display:block !important;
width:100% !important;
max-width:100% !important;
}
body.b2b-dashboard-page .b2b-sidebar{
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
z-index:150 !important;
display:flex !important;
align-items:center !important;
width:100% !important;
height:var(--b2b-mobile-header-h) !important;
min-height:var(--b2b-mobile-header-h) !important;
padding:env(safe-area-inset-top, 0px) 132px 0 12px !important;
overflow:visible !important;
border-radius:0 !important;
background:rgba(255,255,255,.98) !important;
box-shadow:0 10px 24px rgba(6,27,51,.1) !important;
backdrop-filter:blur(16px) !important;
-webkit-backdrop-filter:blur(16px) !important;
}
body.b2b-dashboard-page .b2b-dash-brand,
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-sidebar-toggle,
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-open .b2b-sidebar-toggle{
display:grid !important;
grid-template-columns:36px minmax(0,1fr) 18px !important;
align-items:center !important;
width:100% !important;
min-width:0 !important;
max-width:none !important;
height:48px !important;
min-height:48px !important;
max-height:48px !important;
margin:0 !important;
padding:5px 7px !important;
gap:8px !important;
border-radius:15px !important;
}
body.b2b-dashboard-page .b2b-dash-brand img,
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand img{
width:36px !important;
height:36px !important;
min-width:36px !important;
}
body.b2b-dashboard-page .b2b-dash-brand span,
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-dash-brand span{
display:block !important;
min-width:0 !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
display:block !important;
overflow:hidden !important;
color:#061b33 !important;
font-size:17px !important;
line-height:1 !important;
letter-spacing:-.01em !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page .b2b-dash-brand small{
display:block !important;
overflow:hidden !important;
margin-top:2px !important;
color:#627789 !important;
font-size:8.5px !important;
line-height:1.1 !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page .b2b-sidebar-toggle-icon,
body.b2b-dashboard-page .b2b-app-shell.is-sidebar-collapsed .b2b-sidebar-toggle-icon{
display:inline-grid !important;
width:18px !important;
height:18px !important;
font-size:10px !important;
}
body.b2b-dashboard-page .b2b-topbar{
position:fixed !important;
top:env(safe-area-inset-top, 0px) !important;
right:8px !important;
left:auto !important;
z-index:175 !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
width:auto !important;
height:62px !important;
min-height:62px !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
body.b2b-dashboard-page .b2b-page-identity,
body.b2b-dashboard-page .b2b-vip-icon{
display:none !important;
}
body.b2b-dashboard-page .b2b-top-actions{
gap:5px !important;
}
body.b2b-dashboard-page .b2b-top-actions > button,
body.b2b-dashboard-page .b2b-menu-btn{
width:34px !important;
height:34px !important;
min-width:34px !important;
min-height:34px !important;
padding:0 !important;
border-radius:12px !important;
box-shadow:0 8px 18px rgba(6,27,51,.08) !important;
}
body.b2b-dashboard-page .b2b-language-btn{
width:auto !important;
min-width:44px !important;
padding:0 7px !important;
gap:3px !important;
}
body.b2b-dashboard-page .b2b-language-btn b{
font-size:10px !important;
}
body.b2b-dashboard-page .b2b-language-btn i{
display:none !important;
}
body.b2b-dashboard-page .b2b-notification-btn{
color:#061b33 !important;
background:#ffffff !important;
}
body.b2b-dashboard-page .b2b-notification-btn::before,
body.b2b-dashboard-page .b2b-notification-btn::after{
display:none !important;
content:none !important;
}
body.b2b-dashboard-page .b2b-notification-btn i{
font-size:15px !important;
animation:b2bBellNudge 5.5s ease-in-out infinite !important;
}
body.b2b-dashboard-page .b2b-notification-btn em{
top:-4px !important;
right:-4px !important;
min-width:15px !important;
height:15px !important;
padding:0 3px !important;
border-radius:999px !important;
background:#d93025 !important;
color:#fff !important;
font-size:8px !important;
line-height:15px !important;
box-shadow:0 0 0 2px #fff !important;
}
body.b2b-dashboard-page .b2b-dash-main{
padding-top:var(--b2b-mobile-header-h) !important;
}
body.b2b-dashboard-page .b2b-sidebar-panel{
position:fixed !important;
top:var(--b2b-mobile-header-h) !important;
left:10px !important;
right:10px !important;
z-index:170 !important;
max-height:calc(100vh - var(--b2b-mobile-header-h) - 18px) !important;
overflow:auto !important;
padding:10px !important;
border-radius:18px !important;
background:#061b33 !important;
box-shadow:0 24px 60px rgba(0,0,0,.32) !important;
}
body.b2b-dashboard-page .b2b-title-row{
margin:8px 0 10px !important;
padding:0 2px !important;
}
body.b2b-dashboard-page .b2b-title-row h1{
font-size:20px !important;
line-height:1.05 !important;
}
body.b2b-dashboard-page .b2b-title-row p{
display:-webkit-box !important;
max-height:34px !important;
margin-top:5px !important;
overflow:hidden !important;
color:#60788a !important;
font-size:11px !important;
line-height:1.35 !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
}
body.b2b-dashboard-page .b2b-how-it-works{
display:none !important;
}
body.b2b-dashboard-page .b2b-market-visual,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-map,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map{
min-height:220px !important;
height:220px !important;
border-radius:18px !important;
}
body.b2b-dashboard-page .b2b-market-banner-track,
body.b2b-dashboard-page .b2b-market-banner-window{
min-height:220px !important;
height:220px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide{
padding:22px 42px 32px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide h2{
font-size:24px !important;
line-height:.98 !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide p{
margin:8px 0 12px !important;
font-size:11px !important;
line-height:1.35 !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide a{
min-height:34px !important;
padding:0 12px !important;
border-radius:10px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn,
body.b2b-dashboard-page.b2b-market-banner-active .b2b-floating-map-btn{
position:static !important;
display:inline-flex !important;
width:auto !important;
min-width:0 !important;
min-height:32px !important;
margin:8px 0 0 auto !important;
padding:0 10px !important;
gap:6px !important;
border-radius:999px !important;
transform:none !important;
box-shadow:0 8px 18px rgba(7,27,51,.13) !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn > i{
width:22px !important;
height:22px !important;
border-radius:50% !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn span{
display:none !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn b{
font-size:10px !important;
line-height:1 !important;
}
body.b2b-dashboard-page .b2b-board-toolbar{
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-board-toolbar .b2b-tabs,
body.b2b-dashboard-page .b2b-market-filters{
display:flex !important;
flex-wrap:nowrap !important;
gap:7px !important;
padding:0 12px 7px !important;
margin-inline:-4px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scroll-padding-inline:12px !important;
-webkit-overflow-scrolling:touch !important;
scrollbar-width:none !important;
}
body.b2b-dashboard-page .b2b-board-toolbar .b2b-tabs::-webkit-scrollbar,
body.b2b-dashboard-page .b2b-market-filters::-webkit-scrollbar{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-row{
grid-template-columns:112px minmax(0, 1fr) !important;
grid-template-areas:
"photo info"
"photo stock"
"tracking tracking" !important;
min-height:0 !important;
margin-bottom:9px !important;
overflow:hidden !important;
border-radius:15px !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo{
min-height:0 !important;
height:148px !important;
border-radius:15px 0 0 15px !important;
}
body.b2b-dashboard-page #all-containers .b2b-story-status{
padding:6px 7px !important;
font-size:7.5px !important;
}
body.b2b-dashboard-page #all-containers .b2b-story-reference{
left:8px !important;
right:7px !important;
bottom:27px !important;
font-size:12px !important;
}
body.b2b-dashboard-page #all-containers .b2b-story-route,
body.b2b-dashboard-page #all-containers .b2b-story-controls,
body.b2b-dashboard-page #all-containers .b2b-story-bottom-info{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-info{
padding:10px 10px 5px !important;
border-bottom:0 !important;
}
body.b2b-dashboard-page #all-containers .shipment-route-title{
margin:0 0 7px !important;
font-size:12.5px !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page #all-containers .shipment-route-title span:last-child{
font-size:10.5px !important;
line-height:1.2 !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts{
grid-template-columns:repeat(2, minmax(0,1fr)) !important;
gap:5px !important;
border:0 !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts span{
min-height:34px !important;
padding:5px 6px !important;
border:1px solid #edf3f5 !important;
border-radius:9px !important;
background:#f8fbfc !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(n+5){
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts small{
font-size:6.8px !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts b{
margin-top:3px !important;
font-size:8.8px !important;
}
body.b2b-dashboard-page #all-containers .shipment-products,
body.b2b-dashboard-page #all-containers .b2b-tracking-alert,
body.b2b-dashboard-page #all-containers .b2b-stock-status-panel{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock{
grid-area:stock !important;
grid-template-columns:1fr !important;
gap:6px !important;
align-content:start !important;
padding:2px 10px 10px !important;
background:#fff !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a{
min-height:29px !important;
border-radius:9px !important;
font-size:9.5px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a:first-child{
background:#ffffff !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a + a{
background:#061b33 !important;
color:#ffffff !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
padding:8px 9px 9px !important;
}
body.b2b-dashboard-page #all-containers .mini-current-status{
display:none !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail{
grid-template-columns:repeat(9, 62px) !important;
padding:5px 2px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail i{
width:26px !important;
height:26px !important;
font-size:10px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail b{
max-width:58px !important;
font-size:7px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail small{
display:none !important;
}
body.b2b-dashboard-page .b2b-reserve-panel,
body.b2b-dashboard-page .b2b-request-shell-panel{
max-height:none !important;
}
body.b2b-dashboard-page .b2b-mobile-bottom{
z-index:180 !important;
}
}
@media (max-width:360px){
body.b2b-dashboard-page{
--b2b-mobile-header-h: calc(58px + env(safe-area-inset-top, 0px));
}
body.b2b-dashboard-page .b2b-sidebar{
padding-right:124px !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
font-size:15px !important;
}
body.b2b-dashboard-page .b2b-top-actions{
gap:4px !important;
}
body.b2b-dashboard-page .b2b-top-actions > button,
body.b2b-dashboard-page .b2b-menu-btn{
width:31px !important;
min-width:31px !important;
height:31px !important;
min-height:31px !important;
}
body.b2b-dashboard-page .b2b-language-btn{
min-width:39px !important;
}
body.b2b-dashboard-page #all-containers .shipment-row{
grid-template-columns:104px minmax(0, 1fr) !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo{
height:142px !important;
}
}
@media (prefers-reduced-motion: reduce){
body.b2b-dashboard-page .b2b-notification-btn i{
animation:none !important;
}
}
@keyframes b2bBellNudge{
0%, 88%, 100%{ transform:rotate(0); }
90%{ transform:rotate(-9deg); }
92%{ transform:rotate(8deg); }
94%{ transform:rotate(-6deg); }
96%{ transform:rotate(4deg); }
}
/* Owner final hard stop: mobile cards must not show desktop stock panels or floating map overlays. */
@media (max-width:767px){
body.b2b-dashboard-page .b2b-live-notification-toast,
body.b2b-dashboard-page .b2b-live-notification-toast.is-visible{
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row,
body.b2b-dashboard-page #all-containers .shipment-row{
display:grid !important;
grid-template:
"photo info" auto
"photo stock" auto
"tracking tracking" auto
/ 112px minmax(0, 1fr) !important;
grid-auto-columns:unset !important;
grid-auto-flow:row !important;
column-gap:0 !important;
row-gap:0 !important;
min-height:0 !important;
align-items:stretch !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers .shipment-photo{
grid-area:photo !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers .shipment-info{
grid-area:info !important;
min-width:0 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock,
body.b2b-dashboard-page section#all-containers .shipment-stock{
grid-area:stock !important;
min-width:0 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-mini-tracking,
body.b2b-dashboard-page section#all-containers .shipment-mini-tracking{
grid-area:tracking !important;
min-width:0 !important;
}
body.b2b-dashboard-page #all-containers .shipment-route-title,
body.b2b-dashboard-page #all-containers .shipment-route-title span{
min-width:0 !important;
max-width:100% !important;
overflow:hidden !important;
white-space:normal !important;
word-break:normal !important;
overflow-wrap:break-word !important;
text-overflow:clip !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a.b2b-sparkle-cta,
body.b2b-dashboard-page #all-containers .shipment-stock a.b2b-sparkle-cta:visited{
border-color:#d6a136 !important;
background:#ffffff !important;
color:#061b33 !important;
text-shadow:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a.b2b-sparkle-cta::before,
body.b2b-dashboard-page #all-containers .shipment-stock a.b2b-sparkle-cta::after{
opacity:.08 !important;
}
body.b2b-dashboard-page #all-containers .shipment-row .shipment-stock .b2b-stock-status-panel,
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel,
body.b2b-dashboard-page .shipment-row .shipment-stock .b2b-stock-status-panel{
display:none !important;
visibility:hidden !important;
width:0 !important;
height:0 !important;
min-width:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
pointer-events:none !important;
}
body.b2b-dashboard-page.b2b-mobile-flow-active .b2b-floating-map-btn,
body.b2b-dashboard-page.b2b-mobile-flow-active.b2b-market-banner-active .b2b-floating-map-btn,
body.b2b-dashboard-page.b2b-request-open .b2b-floating-map-btn,
body.b2b-dashboard-page:has([data-b2b-shipment-modal].is-open) .b2b-floating-map-btn{
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
}
/* 2026-08-24 master mobile experience layer: app-style hierarchy without changing desktop logic. */
@media (max-width:767px){
body.b2b-dashboard-page{
--b2b-app-pad:clamp(14px,4.2vw,18px);
--b2b-app-radius:18px;
--b2b-app-card-shadow:0 14px 34px rgba(6,27,51,.08);
--b2b-app-border:1px solid rgba(8,37,65,.08);
--b2b-app-muted:#60778a;
--b2b-bottom-nav-h:calc(72px + env(safe-area-inset-bottom, 0px));
background:#f6fafb !important;
color:#061b33 !important;
touch-action:pan-y !important;
overscroll-behavior-y:auto !important;
}
body.b2b-dashboard-page *,
body.b2b-dashboard-page *::before,
body.b2b-dashboard-page *::after{
box-sizing:border-box !important;
}
body.b2b-dashboard-page .b2b-dash-content{
width:100% !important;
max-width:100% !important;
padding:var(--b2b-app-pad) var(--b2b-app-pad) calc(var(--b2b-bottom-nav-h) + 20px) !important;
overflow:visible !important;
}
body.b2b-dashboard-page .b2b-title-row{
margin:0 0 10px !important;
padding:0 !important;
}
body.b2b-dashboard-page .b2b-title-row h1{
max-width:100% !important;
font-size:clamp(1.25rem,6vw,1.72rem) !important;
line-height:1.04 !important;
letter-spacing:0 !important;
}
body.b2b-dashboard-page .b2b-title-row p{
max-width:100% !important;
color:#496476 !important;
font-size:.76rem !important;
}
body.b2b-dashboard-page .b2b-market-visual{
margin:0 0 10px !important;
box-shadow:var(--b2b-app-card-shadow) !important;
}
body.b2b-dashboard-page .b2b-live-map .b2b-map-preview-head,
body.b2b-dashboard-page .b2b-map-summary,
body.b2b-dashboard-page .b2b-route-dot,
body.b2b-dashboard-page .b2b-ship-marker{
display:none !important;
}
body.b2b-dashboard-page .b2b-live-map .b2b-mobile-live-label,
body.b2b-dashboard-page .b2b-live-map .b2b-mobile-status,
body.b2b-dashboard-page .b2b-live-map .b2b-mobile-timeline,
body.b2b-dashboard-page .b2b-live-map .b2b-mobile-map-metrics{
display:none !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn{
align-self:flex-end !important;
margin:0 0 10px auto !important;
min-height:38px !important;
padding:0 13px !important;
border:1px solid rgba(11,177,190,.30) !important;
background:linear-gradient(135deg,#ffffff,#ecfdff) !important;
color:#063a5c !important;
box-shadow:0 10px 24px rgba(7,33,58,.08), inset 0 0 0 1px rgba(255,255,255,.8) !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn > i{
display:grid !important;
place-items:center !important;
width:22px !important;
height:22px !important;
border-radius:999px !important;
background:#dffcff !important;
color:#0797a2 !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn b{
font-size:10.5px !important;
text-transform:none !important;
}
body.b2b-dashboard-page .b2b-market-search-row{
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
margin:0 0 10px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
display:grid !important;
grid-template-columns:34px minmax(0,1fr) 34px !important;
min-height:46px !important;
padding:5px !important;
border:1px solid rgba(8,37,65,.09) !important;
border-radius:16px !important;
background:#ffffff !important;
box-shadow:0 12px 28px rgba(6,27,51,.07) !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search-icon{
width:34px !important;
height:34px !important;
display:grid !important;
place-items:center !important;
border-radius:12px !important;
background:#eef9fa !important;
color:#0d7f89 !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search input{
min-width:0 !important;
height:34px !important;
padding:0 4px !important;
border:0 !important;
color:#061b33 !important;
font-size:14px !important;
font-weight:800 !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search input::placeholder{
color:#7d91a0 !important;
opacity:1 !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search button[type="submit"]{
width:34px !important;
min-width:34px !important;
height:34px !important;
padding:0 !important;
border-radius:12px !important;
font-size:0 !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search button[type="submit"] i{
margin:0 !important;
font-size:13px !important;
}
body.b2b-dashboard-page .b2b-search-clear{
position:absolute !important;
right:44px !important;
top:50% !important;
transform:translateY(-50%) !important;
width:24px !important;
height:24px !important;
min-width:24px !important;
border-radius:50% !important;
}
body.b2b-dashboard-page .b2b-advanced-search-btn{
justify-self:start !important;
min-height:36px !important;
padding:0 12px !important;
border-radius:999px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters,
body.b2b-dashboard-page .b2b-board-toolbar .b2b-tabs{
display:flex !important;
gap:8px !important;
max-width:100% !important;
padding:2px 0 10px !important;
margin:0 !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scroll-snap-type:x proximity !important;
-webkit-overflow-scrolling:touch !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters button,
body.b2b-dashboard-page .b2b-board-toolbar .b2b-tabs button{
flex:0 0 auto !important;
min-height:34px !important;
padding:0 12px !important;
border-radius:999px !important;
white-space:nowrap !important;
scroll-snap-align:start !important;
font-size:10.5px !important;
}
body.b2b-dashboard-page .b2b-board{
width:100% !important;
padding:12px !important;
border:var(--b2b-app-border) !important;
border-radius:var(--b2b-app-radius) !important;
background:#ffffff !important;
box-shadow:var(--b2b-app-card-shadow) !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-board-toolbar{
display:block !important;
margin:0 0 8px !important;
}
body.b2b-dashboard-page .b2b-board-toolbar label{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-row{
position:relative !important;
border:1px solid rgba(8,37,65,.08) !important;
background:#ffffff !important;
box-shadow:0 10px 24px rgba(6,27,51,.07) !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
body.b2b-dashboard-page #all-containers .shipment-route-title{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
gap:5px !important;
align-items:center !important;
}
body.b2b-dashboard-page #all-containers .shipment-route-title img{
width:15px !important;
height:11px !important;
object-fit:cover !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
display:block !important;
border-top:1px solid rgba(8,37,65,.06) !important;
background:#f9fcfd !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail{
display:flex !important;
gap:8px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scroll-snap-type:x proximity !important;
scrollbar-width:none !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail::-webkit-scrollbar{
display:none !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail span{
flex:0 0 62px !important;
scroll-snap-align:center !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock{
display:grid !important;
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a{
width:100% !important;
justify-content:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page .b2b-shipment-modal{
position:fixed !important;
inset:0 !important;
z-index:240 !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-shipment-modal .b2b-modal-backdrop{
position:absolute !important;
inset:0 !important;
background:rgba(6,27,51,.28) !important;
backdrop-filter:blur(8px) !important;
-webkit-backdrop-filter:blur(8px) !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail{
position:absolute !important;
inset:0 !important;
width:100% !important;
max-width:none !important;
height:100dvh !important;
max-height:none !important;
margin:0 !important;
padding:calc(env(safe-area-inset-top, 0px) + 56px) var(--b2b-app-pad) calc(var(--b2b-bottom-nav-h) + 18px) !important;
border:0 !important;
border-radius:0 !important;
background:#f6fafb !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-detail-back-pill{
position:fixed !important;
top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
left:var(--b2b-app-pad) !important;
z-index:260 !important;
min-height:38px !important;
padding:0 12px !important;
border-radius:999px !important;
background:#ffffff !important;
color:#061b33 !important;
box-shadow:0 12px 26px rgba(6,27,51,.14) !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-modal-close{
position:fixed !important;
top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
right:var(--b2b-app-pad) !important;
z-index:260 !important;
width:38px !important;
height:38px !important;
border-radius:999px !important;
background:#ffffff !important;
box-shadow:0 12px 26px rgba(6,27,51,.14) !important;
}
body.b2b-dashboard-page .b2b-lux-topbar{
display:none !important;
}
body.b2b-dashboard-page .b2b-exec-banner{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
padding:14px !important;
border-radius:20px !important;
background:linear-gradient(145deg,#061b33,#0b3447) !important;
color:#ffffff !important;
box-shadow:0 18px 42px rgba(6,27,51,.16) !important;
}
body.b2b-dashboard-page .b2b-shipment-id-block h2{
font-size:1.55rem !important;
line-height:1.05 !important;
letter-spacing:0 !important;
}
body.b2b-dashboard-page .b2b-shipment-id-block p,
body.b2b-dashboard-page .b2b-status-block em{
font-size:.78rem !important;
line-height:1.35 !important;
}
body.b2b-dashboard-page .b2b-status-block{
padding:12px !important;
border-radius:16px !important;
background:rgba(255,255,255,.1) !important;
color:#ffffff !important;
}
body.b2b-dashboard-page .b2b-header-date-strip,
body.b2b-dashboard-page .b2b-compact-facts,
body.b2b-dashboard-page .b2b-shipment-metric-panel{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-header-date-strip span,
body.b2b-dashboard-page .b2b-shipment-metric-panel span{
min-width:0 !important;
padding:8px !important;
border-radius:12px !important;
background:rgba(255,255,255,.1) !important;
}
body.b2b-dashboard-page .b2b-header-date-strip small,
body.b2b-dashboard-page .b2b-shipment-metric-panel small{
font-size:9px !important;
}
body.b2b-dashboard-page .b2b-header-date-strip b,
body.b2b-dashboard-page .b2b-shipment-metric-panel b{
font-size:10.5px !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
body.b2b-dashboard-page .b2b-detail-progress{
padding:13px !important;
border-radius:18px !important;
background:#ffffff !important;
box-shadow:var(--b2b-app-card-shadow) !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-detail-progress h3{
font-size:1rem !important;
}
body.b2b-dashboard-page .b2b-detail-progress-track{
display:flex !important;
gap:10px !important;
overflow-x:auto !important;
scrollbar-width:none !important;
}
body.b2b-dashboard-page .b2b-detail-progress-track::-webkit-scrollbar{
display:none !important;
}
body.b2b-dashboard-page .b2b-detail-progress-step{
flex:0 0 92px !important;
min-width:92px !important;
text-align:center !important;
}
body.b2b-dashboard-page .b2b-compact-detail-stack{
display:grid !important;
gap:10px !important;
}
body.b2b-dashboard-page .b2b-compact-row{
border:var(--b2b-app-border) !important;
border-radius:18px !important;
background:#ffffff !important;
box-shadow:var(--b2b-app-card-shadow) !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-compact-row summary{
min-height:62px !important;
padding:11px 12px !important;
gap:9px !important;
list-style:none !important;
}
body.b2b-dashboard-page .b2b-compact-copy b{
font-size:13px !important;
line-height:1.15 !important;
}
body.b2b-dashboard-page .b2b-compact-copy small{
display:-webkit-box !important;
max-height:30px !important;
overflow:hidden !important;
font-size:10.5px !important;
line-height:1.35 !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
}
body.b2b-dashboard-page .b2b-compact-row summary > strong{
max-width:92px !important;
padding:5px 7px !important;
font-size:9px !important;
white-space:normal !important;
line-height:1.12 !important;
}
body.b2b-dashboard-page .b2b-compact-row-body{
padding:0 12px 13px !important;
}
body.b2b-dashboard-page .b2b-product-manifest{
display:grid !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-manifest-head{
grid-template-columns:32px minmax(0,1fr) !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-manifest-head strong{
grid-column:1 / -1 !important;
justify-self:start !important;
}
body.b2b-dashboard-page .b2b-product-line{
display:grid !important;
grid-template-columns:34px 46px minmax(0,1fr) !important;
gap:8px !important;
align-items:center !important;
padding:8px !important;
border-radius:14px !important;
}
body.b2b-dashboard-page .b2b-product-line img{
width:46px !important;
height:42px !important;
object-fit:cover !important;
}
body.b2b-dashboard-page .b2b-product-line span{
grid-column:auto !important;
}
body.b2b-dashboard-page .b2b-product-line > span:not(:first-child){
grid-column:2 / -1 !important;
}
body.b2b-dashboard-page .b2b-product-line > span b,
body.b2b-dashboard-page .b2b-product-line div b{
font-size:12px !important;
}
body.b2b-dashboard-page .b2b-product-line > span:nth-last-child(-n+2),
body.b2b-dashboard-page .b2b-product-line > span small{
font-size:10px !important;
}
body.b2b-dashboard-page .b2b-vip-route-line{
grid-template-columns:1fr !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-vip-route-line > i{
transform:rotate(90deg) !important;
}
body.b2b-dashboard-page .b2b-vip-route-meta,
body.b2b-dashboard-page .b2b-compact-detail-list{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-vip-route-meta span,
body.b2b-dashboard-page .b2b-compact-detail-list span{
min-width:0 !important;
padding:9px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page .b2b-compact-purchase,
body.b2b-dashboard-page .b2b-action-center{
padding:12px !important;
border-radius:18px !important;
background:#ffffff !important;
box-shadow:var(--b2b-app-card-shadow) !important;
}
body.b2b-dashboard-page .b2b-action-center-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
body.b2b-dashboard-page .b2b-action-card{
min-height:0 !important;
padding:12px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-action-card button{
width:100% !important;
min-height:44px !important;
}
body.b2b-dashboard-page .b2b-request-shell{
position:fixed !important;
inset:0 !important;
z-index:245 !important;
padding:0 !important;
background:rgba(6,27,51,.26) !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-request-shell-panel{
position:absolute !important;
inset:auto 0 0 0 !important;
width:100% !important;
max-width:none !important;
max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 12px) !important;
margin:0 !important;
padding:calc(54px + env(safe-area-inset-top, 0px)) var(--b2b-app-pad) calc(var(--b2b-bottom-nav-h) + 18px) !important;
border-radius:24px 24px 0 0 !important;
background:#ffffff !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
}
body.b2b-dashboard-page .b2b-commercial-back{
position:absolute !important;
top:calc(10px + env(safe-area-inset-top, 0px)) !important;
left:var(--b2b-app-pad) !important;
min-height:36px !important;
padding:0 11px !important;
border-radius:999px !important;
}
body.b2b-dashboard-page .b2b-request-close{
position:absolute !important;
top:calc(10px + env(safe-area-inset-top, 0px)) !important;
right:var(--b2b-app-pad) !important;
width:36px !important;
height:36px !important;
border-radius:999px !important;
}
body.b2b-dashboard-page .b2b-request-main{
display:grid !important;
grid-template-columns:1fr !important;
gap:12px !important;
}
body.b2b-dashboard-page .b2b-request-hero{
padding:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
body.b2b-dashboard-page .b2b-request-hero h2{
font-size:1.45rem !important;
line-height:1.06 !important;
}
body.b2b-dashboard-page .b2b-request-steps{
display:flex !important;
gap:8px !important;
overflow-x:auto !important;
padding:3px 0 !important;
}
body.b2b-dashboard-page .b2b-request-steps li{
flex:0 0 auto !important;
min-width:120px !important;
padding:8px !important;
border-radius:14px !important;
}
body.b2b-dashboard-page .b2b-premium-fields,
body.b2b-dashboard-page .b2b-kyc-signatory{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
body.b2b-dashboard-page .b2b-premium-fields input,
body.b2b-dashboard-page .b2b-premium-fields select,
body.b2b-dashboard-page .b2b-premium-fields textarea,
body.b2b-dashboard-page .b2b-kyc-signatory input,
body.b2b-dashboard-page .b2b-kyc-signatory select{
min-height:44px !important;
font-size:16px !important;
}
body.b2b-dashboard-page .b2b-request-trust-strip{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-request-trust-strip span{
min-height:0 !important;
padding:10px !important;
}
body.b2b-dashboard-page .b2b-notification-panel,
body.b2b-dashboard-page .b2b-language-panel{
position:fixed !important;
left:var(--b2b-app-pad) !important;
right:var(--b2b-app-pad) !important;
top:calc(var(--b2b-mobile-header-h) + 8px) !important;
width:auto !important;
max-width:none !important;
max-height:calc(100dvh - var(--b2b-mobile-header-h) - var(--b2b-bottom-nav-h) - 22px) !important;
border-radius:20px !important;
overflow:auto !important;
z-index:230 !important;
}
body.b2b-dashboard-page .b2b-notification-row{
min-height:0 !important;
padding:10px !important;
gap:9px !important;
}
body.b2b-dashboard-page .b2b-notification-row p{
display:-webkit-box !important;
max-height:34px !important;
overflow:hidden !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
}
body.b2b-dashboard-page.b2b-account-clean-view [data-b2b-customer-workspace]{
margin-top:0 !important;
padding-bottom:calc(var(--b2b-bottom-nav-h) + 20px) !important;
}
body.b2b-dashboard-page .b2b-customer-portal,
body.b2b-dashboard-page .b2b-notification-center{
padding:0 !important;
background:transparent !important;
}
body.b2b-dashboard-page .b2b-kyc-shell{
display:grid !important;
grid-template-columns:1fr !important;
gap:12px !important;
}
body.b2b-dashboard-page .b2b-kyc-content,
body.b2b-dashboard-page .b2b-kyc-aside{
min-width:0 !important;
}
body.b2b-dashboard-page .b2b-profile-hero,
body.b2b-dashboard-page .b2b-kyc-hero{
display:grid !important;
grid-template-columns:56px minmax(0,1fr) !important;
gap:11px !important;
padding:14px !important;
border-radius:20px !important;
}
body.b2b-dashboard-page .b2b-account-logo-large,
body.b2b-dashboard-page .b2b-account-logo-large img{
width:56px !important;
height:56px !important;
border-radius:18px !important;
}
body.b2b-dashboard-page .b2b-profile-hero button{
grid-column:1 / -1 !important;
width:100% !important;
min-height:42px !important;
}
body.b2b-dashboard-page .b2b-profile-hero h2{
font-size:1.1rem !important;
line-height:1.12 !important;
}
body.b2b-dashboard-page .b2b-vip-journey-card{
padding:14px !important;
border-radius:20px !important;
}
body.b2b-dashboard-page .b2b-vip-journey-steps{
display:flex !important;
gap:10px !important;
overflow-x:auto !important;
padding:2px 2px 8px !important;
scroll-snap-type:x proximity !important;
}
body.b2b-dashboard-page .b2b-vip-journey-steps::before,
body.b2b-dashboard-page .b2b-vip-journey-steps::after{
display:none !important;
}
body.b2b-dashboard-page .b2b-vip-step{
flex:0 0 104px !important;
min-height:128px !important;
padding:9px !important;
border:1px solid rgba(8,37,65,.07) !important;
border-radius:18px !important;
background:#ffffff !important;
scroll-snap-align:start !important;
}
body.b2b-dashboard-page .b2b-vip-step i,
body.b2b-dashboard-page .b2b-vip-premium-diamond.is-mini{
width:42px !important;
height:42px !important;
border-width:4px !important;
}
body.b2b-dashboard-page .b2b-vip-step strong{
font-size:.68rem !important;
}
body.b2b-dashboard-page .b2b-vip-step small{
font-size:.62rem !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-card{
border-radius:20px !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-hero{
padding:18px 14px 14px !important;
}
body.b2b-dashboard-page .b2b-vip-premium-diamond{
width:92px !important;
height:72px !important;
animation:b2bVipPremiumTurn 18s ease-in-out infinite !important;
filter:drop-shadow(0 9px 13px rgba(122,77,8,.1)) !important;
}
body.b2b-dashboard-page .b2b-vip-bonus-hero strong{
font-size:1.82rem !important;
}
body.b2b-dashboard-page .b2b-profile-tabs{
display:flex !important;
gap:8px !important;
overflow-x:auto !important;
padding:2px 0 8px !important;
scrollbar-width:none !important;
}
body.b2b-dashboard-page .b2b-profile-tabs::-webkit-scrollbar{
display:none !important;
}
body.b2b-dashboard-page .b2b-profile-tabs a{
flex:0 0 auto !important;
min-height:36px !important;
padding:0 12px !important;
border-radius:999px !important;
white-space:nowrap !important;
font-size:10.5px !important;
}
body.b2b-dashboard-page .b2b-profile-completion{
padding:13px !important;
border-radius:18px !important;
gap:10px !important;
}
body.b2b-dashboard-page .b2b-profile-grid,
body.b2b-dashboard-page .b2b-profile-form,
body.b2b-dashboard-page .b2b-kyc-stats,
body.b2b-dashboard-page .b2b-kyc-main,
body.b2b-dashboard-page .b2b-kyc-doc-grid,
body.b2b-dashboard-page .b2b-kyc-side-stack{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
body.b2b-dashboard-page .b2b-kyc-stats{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
body.b2b-dashboard-page .b2b-kyc-center,
body.b2b-dashboard-page .b2b-kyc-ai-card,
body.b2b-dashboard-page .b2b-kyc-signatory,
body.b2b-dashboard-page .b2b-reservation-card{
border-radius:20px !important;
box-shadow:var(--b2b-app-card-shadow) !important;
}
body.b2b-dashboard-page .b2b-kyc-title{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-kyc-title h3{
font-size:1.12rem !important;
}
body.b2b-dashboard-page .b2b-kyc-doc{
padding:12px !important;
}
body.b2b-dashboard-page .b2b-kyc-doc-head{
grid-template-columns:36px minmax(0,1fr) !important;
}
body.b2b-dashboard-page .b2b-kyc-doc-head em{
grid-column:2 !important;
justify-self:start !important;
margin-top:3px !important;
}
body.b2b-dashboard-page .b2b-kyc-doc-actions{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-kyc-doc-actions label,
body.b2b-dashboard-page .b2b-kyc-doc-actions button{
min-height:38px !important;
padding:0 9px !important;
font-size:10.5px !important;
}
body.b2b-dashboard-page .b2b-kyc-doc-actions .danger{
grid-column:1 / -1 !important;
}
body.b2b-dashboard-page .b2b-reservation-toolbar{
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-reservation-card{
display:grid !important;
grid-template-columns:42px minmax(0,1fr) !important;
gap:10px !important;
padding:12px !important;
}
body.b2b-dashboard-page .b2b-reservation-head,
body.b2b-dashboard-page .b2b-reservation-facts,
body.b2b-dashboard-page .b2b-reservation-actions{
grid-column:1 / -1 !important;
}
body.b2b-dashboard-page .b2b-reservation-facts{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-reservation-actions{
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-mobile-bottom{
position:fixed !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
height:var(--b2b-bottom-nav-h) !important;
padding:8px max(10px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-right, 0px)) !important;
border-radius:20px 20px 0 0 !important;
background:rgba(6,27,51,.97) !important;
backdrop-filter:blur(16px) !important;
-webkit-backdrop-filter:blur(16px) !important;
}
body.b2b-dashboard-page .b2b-mobile-bottom a{
min-width:0 !important;
border-radius:14px !important;
font-size:9.5px !important;
}
body.b2b-dashboard-page .b2b-mobile-drawer-panel{
max-height:calc(100dvh - var(--b2b-mobile-header-h) - 12px) !important;
padding-bottom:calc(var(--b2b-bottom-nav-h) + 16px) !important;
overflow:auto !important;
}
body.b2b-dashboard-page.b2b-rtl .b2b-modal-card .b2b-detail-back-pill,
body.b2b-dashboard-page.b2b-rtl .b2b-commercial-back{
left:auto !important;
right:var(--b2b-app-pad) !important;
}
body.b2b-dashboard-page.b2b-rtl .b2b-modal-card .b2b-modal-close,
body.b2b-dashboard-page.b2b-rtl .b2b-request-close{
right:auto !important;
left:var(--b2b-app-pad) !important;
}
body.b2b-dashboard-page.b2b-rtl .b2b-vip-route-line > i{
transform:rotate(-90deg) !important;
}
}
@media (max-width:360px){
body.b2b-dashboard-page .b2b-dash-content{
padding-left:12px !important;
padding-right:12px !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts{
grid-template-columns:1fr !important;
}
body.b2b-dashboard-page .b2b-header-date-strip,
body.b2b-dashboard-page .b2b-compact-facts,
body.b2b-dashboard-page .b2b-shipment-metric-panel,
body.b2b-dashboard-page .b2b-vip-route-meta,
body.b2b-dashboard-page .b2b-compact-detail-list,
body.b2b-dashboard-page .b2b-request-trust-strip,
body.b2b-dashboard-page .b2b-kyc-stats,
body.b2b-dashboard-page .b2b-reservation-facts{
grid-template-columns:1fr !important;
}
}
@media (min-width:768px) and (max-width:1024px){
body.b2b-dashboard-page{
overflow-x:hidden !important;
}
body.b2b-dashboard-page .b2b-dash-content{
max-width:100% !important;
}
body.b2b-dashboard-page .shipment-row{
grid-template-columns:180px minmax(0,1fr) minmax(220px,300px) !important;
}
body.b2b-dashboard-page .b2b-kyc-shell{
grid-template-columns:1fr !important;
}
}
@media (orientation:landscape) and (max-height:560px) and (max-width:920px){
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail,
body.b2b-dashboard-page .b2b-request-shell-panel{
padding-top:54px !important;
}
body.b2b-dashboard-page .b2b-market-visual,
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map{
height:170px !important;
min-height:170px !important;
}
}
/* 2026-08-24 mobile revalidation: compact detail screen + iPhone focus stability. */
@media (max-width:767px){
body.b2b-dashboard-page input,
body.b2b-dashboard-page select,
body.b2b-dashboard-page textarea,
body.b2b-dashboard-page button[contenteditable="true"],
body.b2b-dashboard-page [role="combobox"],
body.b2b-dashboard-page .b2b-otp-input,
body.b2b-dashboard-page .b2b-grand-search input[type="search"],
body.b2b-dashboard-page .b2b-market-search-row .b2b-search input,
body.b2b-dashboard-page .b2b-premium-fields input,
body.b2b-dashboard-page .b2b-premium-fields select,
body.b2b-dashboard-page .b2b-premium-fields textarea,
body.b2b-dashboard-page .b2b-profile-form input,
body.b2b-dashboard-page .b2b-profile-form textarea,
body.b2b-dashboard-page .b2b-kyc-ai-fields input,
body.b2b-dashboard-page .b2b-kyc-signatory input,
body.b2b-dashboard-page .b2b-kyc-signatory select,
body.b2b-dashboard-page .b2b-reservation-toolbar input,
body.b2b-dashboard-page .b2b-reservation-toolbar select{
font-size:16px !important;
-webkit-text-size-adjust:100% !important;
}
body.b2b-dashboard-page input:focus,
body.b2b-dashboard-page select:focus,
body.b2b-dashboard-page textarea:focus,
body.b2b-dashboard-page .b2b-grand-search:focus-within,
body.b2b-dashboard-page .b2b-search:focus-within,
body.b2b-dashboard-page .b2b-premium-form:focus-within{
transform:none !important;
zoom:1 !important;
}
body.b2b-dashboard-page .b2b-shipment-modal .b2b-modal-card.b2b-lux-detail{
padding:calc(env(safe-area-inset-top, 0px) + 48px) 12px calc(var(--b2b-bottom-nav-h) + 12px) !important;
background:#f6fafb !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-detail-back-pill{
min-height:32px !important;
padding:0 10px !important;
font-size:11px !important;
box-shadow:0 8px 18px rgba(6,27,51,.12) !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-detail-back-pill i{
font-size:10px !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-modal-close{
width:34px !important;
height:34px !important;
font-size:14px !important;
box-shadow:0 8px 18px rgba(6,27,51,.12) !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-exec-banner,
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail.b2b-exec-detail .b2b-exec-banner{
gap:8px !important;
padding:10px !important;
border:1px solid rgba(8,37,65,.08) !important;
border-left:4px solid #d9a83b !important;
border-radius:16px !important;
background:#ffffff !important;
color:#061b33 !important;
box-shadow:0 12px 24px rgba(7,33,58,.08) !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-shipment-id-block{
display:grid !important;
gap:5px !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-shipment-id-block span{
width:max-content !important;
max-width:100% !important;
padding:4px 8px !important;
border-radius:999px !important;
background:#eefbf5 !important;
color:#08794a !important;
font-size:9.5px !important;
line-height:1.15 !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-shipment-id-block h2{
margin:0 !important;
font-size:1.18rem !important;
line-height:1.08 !important;
letter-spacing:0 !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-shipment-id-block p{
margin:0 !important;
font-size:11px !important;
line-height:1.25 !important;
color:#4d6578 !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-shipment-container-chip{
width:max-content !important;
max-width:100% !important;
min-height:26px !important;
padding:5px 9px !important;
border-radius:999px !important;
background:#fff8e7 !important;
color:#6b4a05 !important;
font-size:10.5px !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-status-block{
display:grid !important;
gap:6px !important;
padding:9px !important;
border:1px solid rgba(8,37,65,.07) !important;
border-radius:14px !important;
background:#f7fcfd !important;
color:#061b33 !important;
box-shadow:none !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-status-block small{
font-size:8.8px !important;
line-height:1.1 !important;
letter-spacing:.08em !important;
color:#a06f0c !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-status-block b{
font-size:.95rem !important;
line-height:1.14 !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-status-block em{
max-height:34px !important;
overflow:hidden !important;
font-size:10.5px !important;
line-height:1.32 !important;
color:#526a7d !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-header-date-strip,
body.b2b-dashboard-page .b2b-modal-card .b2b-compact-facts,
body.b2b-dashboard-page .b2b-modal-card .b2b-shipment-metric-panel{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-header-date-strip span,
body.b2b-dashboard-page .b2b-modal-card .b2b-shipment-metric-panel span{
min-height:44px !important;
padding:6px !important;
border-radius:10px !important;
background:#ffffff !important;
border:1px solid rgba(8,37,65,.07) !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-header-date-strip small,
body.b2b-dashboard-page .b2b-modal-card .b2b-shipment-metric-panel small{
font-size:8px !important;
line-height:1.05 !important;
letter-spacing:.07em !important;
color:#7c8c98 !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-header-date-strip b,
body.b2b-dashboard-page .b2b-modal-card .b2b-shipment-metric-panel b{
margin-top:3px !important;
font-size:9.8px !important;
line-height:1.15 !important;
color:#061b33 !important;
overflow-wrap:anywhere !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-detail-progress{
margin:8px 0 0 !important;
padding:10px !important;
border-radius:16px !important;
box-shadow:0 10px 22px rgba(7,33,58,.07) !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-detail-progress h3{
margin:0 0 7px !important;
font-size:.9rem !important;
line-height:1.15 !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-detail-progress-step{
flex-basis:78px !important;
min-width:78px !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-detail-progress-step i{
width:28px !important;
height:28px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-detail-progress-step b{
font-size:9px !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-detail-progress-step small{
font-size:8px !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-compact-detail-stack{
gap:8px !important;
margin-top:8px !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-compact-row{
border-radius:15px !important;
box-shadow:0 10px 22px rgba(7,33,58,.06) !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-compact-row summary{
min-height:50px !important;
padding:9px 10px !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-compact-copy b{
font-size:12px !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-compact-copy small{
max-height:26px !important;
font-size:9.8px !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-action-center,
body.b2b-dashboard-page .b2b-modal-card .b2b-purchase-options,
body.b2b-dashboard-page .b2b-modal-card .b2b-commercial-choice{
padding:10px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-mobile-bottom{
height:66px !important;
padding-top:7px !important;
padding-bottom:calc(7px + env(safe-area-inset-bottom, 0px)) !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search input[type="search"],
body.b2b-dashboard-page .b2b-grand-search input[type="search"],
body.b2b-dashboard-page input[type="search"],
body.b2b-dashboard-page input[type="email"],
body.b2b-dashboard-page input[type="tel"],
body.b2b-dashboard-page input[type="text"],
body.b2b-dashboard-page input[type="number"],
body.b2b-dashboard-page input[inputmode],
body.b2b-dashboard-page select,
body.b2b-dashboard-page textarea{
font-size:16px !important;
line-height:1.25 !important;
}
}
@media (max-width:380px){
body.b2b-dashboard-page .b2b-modal-card .b2b-header-date-strip{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-header-date-strip span:last-child{
grid-column:1 / -1 !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-compact-facts,
body.b2b-dashboard-page .b2b-modal-card .b2b-shipment-metric-panel{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
body.b2b-dashboard-page .b2b-modal-card .b2b-header-date-strip b,
body.b2b-dashboard-page .b2b-modal-card .b2b-shipment-metric-panel b{
font-size:9px !important;
}
}
/* 2026-08-24 mobile home card revalidation: tracking line above actions, 3x3 left + details right. */
@media (max-width:767px){
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row,
body.b2b-dashboard-page #all-containers .shipment-row{
grid-template:
"photo info" auto
"tracking tracking" auto
"stock stock" auto
/ 112px minmax(0, 1fr) !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
margin:0 !important;
padding:8px 9px 10px !important;
border-top:1px solid rgba(8,37,65,.06) !important;
border-bottom:1px solid rgba(8,37,65,.06) !important;
background:linear-gradient(180deg,#fbfdfe 0%,#f6fbfc 100%) !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail{
position:relative !important;
display:flex !important;
align-items:flex-start !important;
gap:8px !important;
padding:3px 2px 0 !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scroll-snap-type:x proximity !important;
scrollbar-width:none !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail::before{
content:"" !important;
position:absolute !important;
left:15px !important;
right:15px !important;
top:17px !important;
height:3px !important;
border-radius:999px !important;
background:linear-gradient(90deg,#19b86b 0%,#19b86b var(--track-progress,0%),#d9e4ea var(--track-progress,0%),#d9e4ea 100%) !important;
pointer-events:none !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail span{
position:relative !important;
z-index:1 !important;
flex:0 0 72px !important;
min-width:72px !important;
display:grid !important;
justify-items:center !important;
gap:3px !important;
scroll-snap-align:center !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail i{
width:29px !important;
height:29px !important;
border:2px solid #d9e4ea !important;
background:#ffffff !important;
color:#9aadba !important;
box-shadow:0 6px 12px rgba(7,33,58,.08) !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail .is-done i{
border-color:#19b86b !important;
background:#eafbf2 !important;
color:#098b4d !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail .is-current i{
border-color:#21a9e8 !important;
background:#e9f8ff !important;
color:#0878ae !important;
box-shadow:0 0 0 4px rgba(33,169,232,.14),0 8px 16px rgba(8,120,174,.16) !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail b{
max-width:68px !important;
min-height:22px !important;
font-size:7.8px !important;
line-height:1.1 !important;
color:#061b33 !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail small{
max-width:68px !important;
font-size:7px !important;
line-height:1.05 !important;
color:#6f8290 !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock{
display:grid !important;
grid-template-columns:42px minmax(0,1fr) !important;
gap:8px !important;
padding:10px !important;
background:#ffffff !important;
direction:ltr !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-mobile-card-more{
display:grid !important;
place-items:center !important;
width:42px !important;
min-width:42px !important;
height:38px !important;
min-height:38px !important;
border:1px solid rgba(8,37,65,.1) !important;
border-radius:13px !important;
background:#ffffff !important;
color:#061b33 !important;
box-shadow:0 8px 18px rgba(7,33,58,.07) !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-mobile-card-more i{
font-size:16px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a.b2b-sparkle-cta{
grid-column:2 !important;
grid-row:1 !important;
min-height:38px !important;
border-radius:13px !important;
background:#061b33 !important;
color:#ffffff !important;
border-color:#061b33 !important;
font-size:11px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a:not(.b2b-sparkle-cta),
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-commercial-disabled{
grid-column:1 / -1 !important;
grid-row:2 !important;
min-height:38px !important;
border-radius:13px !important;
border:1px solid rgba(196,139,43,.38) !important;
background:linear-gradient(135deg,#f7c65a 0%,#d7972f 100%) !important;
color:#061b33 !important;
font-size:11px !important;
font-weight:900 !important;
box-shadow:0 10px 20px rgba(196,139,43,.16) !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-stock-status-panel{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts{
padding-bottom:8px !important;
}
body.b2b-dashboard-page #all-containers .shipment-row{
overflow:hidden !important;
}
body.b2b-dashboard-page.b2b-rtl #all-containers .shipment-route-title{
direction:ltr !important;
text-align:left !important;
}
body.b2b-dashboard-page.b2b-rtl #all-containers .shipment-route-title span{
direction:ltr !important;
justify-content:flex-start !important;
overflow:visible !important;
text-align:left !important;
}
body.b2b-dashboard-page.b2b-rtl #all-containers .shipment-route-title i{
transform:none !important;
}
body.b2b-dashboard-page.b2b-rtl #all-containers .shipment-stock a,
body.b2b-dashboard-page.b2b-rtl #all-containers .shipment-stock span{
direction:rtl !important;
}
}
@media (min-width:768px){
body.b2b-dashboard-page .b2b-mobile-card-more{
display:none !important;
}
}
/* 2026-08-25 mobile compaction pass: stable header and tighter home rhythm. */
@media (max-width:767px){
html,
body.b2b-dashboard-page{
width:100% !important;
max-width:100% !important;
overflow-x:hidden !important;
}
body.b2b-dashboard-page{
padding-top:0 !important;
background:#f5f8fb !important;
}
body.b2b-dashboard-page .b2b-app-shell{
margin-top:0 !important;
padding-top:0 !important;
transform:none !important;
}
body.b2b-dashboard-page .b2b-dash-main{
padding-top:58px !important;
margin-top:0 !important;
}
body.b2b-dashboard-page .b2b-sidebar,
body.b2b-dashboard-page .b2b-topbar{
position:fixed !important;
top:0 !important;
transform:none !important;
height:58px !important;
min-height:58px !important;
max-height:58px !important;
background:linear-gradient(135deg,#061b33 0%,#082744 100%) !important;
}
body.b2b-dashboard-page .b2b-sidebar{
width:calc(100vw - 112px) !important;
max-width:calc(100vw - 112px) !important;
padding:8px 4px 7px 12px !important;
z-index:340 !important;
overflow:visible !important;
}
body.b2b-dashboard-page .b2b-topbar{
width:100vw !important;
padding:9px 10px 9px calc(100vw - 108px) !important;
z-index:330 !important;
}
body.b2b-dashboard-page .b2b-dash-brand{
height:43px !important;
min-height:43px !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-dash-brand img{
width:42px !important;
height:42px !important;
min-width:42px !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
max-width:166px !important;
font-size:20px !important;
line-height:.98 !important;
}
body.b2b-dashboard-page .b2b-dash-brand small{
max-width:160px !important;
margin-top:3px !important;
font-size:6.8px !important;
}
body.b2b-dashboard-page .b2b-top-actions{
height:40px !important;
gap:5px !important;
align-items:center !important;
}
body.b2b-dashboard-page .b2b-language-btn,
body.b2b-dashboard-page .b2b-notification-btn,
body.b2b-dashboard-page .b2b-menu-btn{
width:32px !important;
min-width:32px !important;
height:32px !important;
min-height:32px !important;
border-radius:10px !important;
}
body.b2b-dashboard-page .b2b-notification-count{
top:-5px !important;
right:-4px !important;
min-width:16px !important;
height:16px !important;
font-size:9px !important;
}
body.b2b-dashboard-page .b2b-dash-content{
padding:10px 14px 76px !important;
}
body.b2b-dashboard-page .b2b-market-visual{
height:164px !important;
min-height:164px !important;
max-height:164px !important;
margin:0 0 8px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-banner-track,
body.b2b-dashboard-page .b2b-market-banner-slide{
height:164px !important;
min-height:164px !important;
max-height:164px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide{
padding:18px 42px 28px 24px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide small{
margin-bottom:6px !important;
font-size:9px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide h2{
max-width:230px !important;
font-size:23px !important;
line-height:1.02 !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide p{
margin:7px 0 10px !important;
font-size:10.5px !important;
line-height:1.32 !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide a{
min-height:31px !important;
padding:7px 12px !important;
font-size:9.5px !important;
}
body.b2b-dashboard-page .b2b-banner-arrow{
width:30px !important;
height:30px !important;
}
body.b2b-dashboard-page .b2b-banner-dots{
bottom:8px !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn,
body.b2b-dashboard-page.b2b-market-banner-active .b2b-floating-map-btn{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
width:max-content !important;
max-width:128px !important;
height:30px !important;
min-height:30px !important;
margin:0 0 8px !important;
padding:6px 12px !important;
border-radius:999px !important;
font-size:9px !important;
box-shadow:0 8px 18px rgba(24,170,183,.12) !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn span em{
display:none !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn b{
font-size:10px !important;
line-height:1 !important;
}
body.b2b-dashboard-page .b2b-market-search-row{
margin:0 0 10px !important;
height:auto !important;
min-height:0 !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
height:50px !important;
min-height:50px !important;
padding:7px 8px 7px 42px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search-icon{
left:14px !important;
width:22px !important;
height:22px !important;
font-size:12px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search input,
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search input[type="search"]{
height:36px !important;
min-height:36px !important;
font-size:16px !important;
line-height:36px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search button[type="submit"]{
width:36px !important;
min-width:36px !important;
height:36px !important;
min-height:36px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-search-hints,
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search .b2b-grand-search-panel{
max-height:36px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters{
margin:0 0 10px !important;
padding:0 0 4px !important;
height:46px !important;
min-height:46px !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters button{
height:38px !important;
min-height:38px !important;
padding:8px 14px !important;
border-radius:14px !important;
font-size:11px !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page #all-containers.b2b-board,
body.b2b-dashboard-page section#all-containers.b2b-board{
margin-top:0 !important;
padding-top:0 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row{
grid-template:
"photo info" 176px
"tracking tracking" auto
"products products" auto
"stock stock" auto
/ minmax(104px,31%) minmax(0,1fr) !important;
gap:0 !important;
margin:0 0 12px !important;
border-radius:16px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers .shipment-photo,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers .shipment-info{
height:176px !important;
min-height:176px !important;
max-height:176px !important;
}
body.b2b-dashboard-page #all-containers .shipment-info{
padding:11px 10px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers .shipment-route-title{
margin:0 0 9px !important;
min-height:12px !important;
font-size:11px !important;
line-height:1.1 !important;
gap:6px !important;
}
body.b2b-dashboard-page #all-containers .shipment-route-title span{
font-size:11px !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts,
body.b2b-dashboard-page section#all-containers .shipment-facts{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:7px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span,
body.b2b-dashboard-page section#all-containers .shipment-facts span{
min-height:42px !important;
padding:7px 6px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:nth-child(n+5),
body.b2b-dashboard-page section#all-containers .shipment-facts span:nth-child(n+5){
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:nth-child(8),
body.b2b-dashboard-page section#all-containers .shipment-facts span:nth-child(8){
display:block !important;
grid-column:1 / -1 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts small,
body.b2b-dashboard-page section#all-containers .shipment-facts small{
font-size:7px !important;
line-height:1.05 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts b,
body.b2b-dashboard-page section#all-containers .shipment-facts b{
margin-top:3px !important;
font-size:10px !important;
line-height:1.08 !important;
word-break:break-word !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
min-height:0 !important;
padding:8px 10px !important;
gap:6px !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking .tracking-step,
body.b2b-dashboard-page #all-containers .shipment-mini-tracking li{
min-height:40px !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking small,
body.b2b-dashboard-page #all-containers .shipment-mini-tracking span{
font-size:8px !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products,
body.b2b-dashboard-page section#all-containers .shipment-products{
min-height:0 !important;
padding:10px !important;
gap:8px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3,
body.b2b-dashboard-page section#all-containers .shipment-products h3{
margin:0 0 7px !important;
min-height:0 !important;
gap:4px !important;
font-size:12px !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3 small,
body.b2b-dashboard-page section#all-containers .shipment-products h3 small{
font-size:9px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3 button,
body.b2b-dashboard-page section#all-containers .shipment-products h3 button{
min-height:28px !important;
padding:6px 8px !important;
font-size:9px !important;
border-radius:10px !important;
}
body.b2b-dashboard-page #all-containers .shipment-product-list,
body.b2b-dashboard-page #all-containers .shipment-products-list{
gap:7px !important;
}
body.b2b-dashboard-page #all-containers .shipment-product,
body.b2b-dashboard-page #all-containers .shipment-product-card{
min-height:50px !important;
padding:7px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page #all-containers .shipment-product img,
body.b2b-dashboard-page #all-containers .shipment-product-card img{
width:42px !important;
height:34px !important;
object-fit:contain !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card,
body.b2b-dashboard-page section#all-containers .shipment-product-card{
display:grid !important;
grid-template-columns:48px minmax(0,1fr) auto !important;
align-items:center !important;
width:100% !important;
max-width:100% !important;
min-height:54px !important;
height:54px !important;
padding:6px 8px !important;
gap:8px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card img,
body.b2b-dashboard-page section#all-containers .shipment-product-card img{
grid-column:1 !important;
width:44px !important;
height:36px !important;
border-radius:9px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card span,
body.b2b-dashboard-page section#all-containers .shipment-product-card span{
grid-column:2 !important;
padding:0 !important;
min-width:0 !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card b,
body.b2b-dashboard-page section#all-containers .shipment-product-card b{
display:block !important;
font-size:10px !important;
line-height:1.1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card small,
body.b2b-dashboard-page section#all-containers .shipment-product-card small{
display:block !important;
margin-top:2px !important;
font-size:8px !important;
line-height:1.1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card strong,
body.b2b-dashboard-page section#all-containers .shipment-product-card strong{
grid-column:3 !important;
padding:0 !important;
min-width:62px !important;
font-size:10px !important;
line-height:1.05 !important;
text-align:right !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock,
body.b2b-dashboard-page section#all-containers .shipment-stock{
grid-template-columns:44px minmax(0,1fr) !important;
min-height:0 !important;
padding:9px 10px 10px !important;
gap:8px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock .b2b-mobile-card-more,
body.b2b-dashboard-page section#all-containers .shipment-stock .b2b-mobile-card-more{
width:44px !important;
min-width:44px !important;
height:44px !important;
min-height:44px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta{
min-height:44px !important;
height:44px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta span,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta span{
font-size:13px !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page .b2b-mobile-bottom{
min-height:60px !important;
height:60px !important;
padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
}
body.b2b-dashboard-page .b2b-mobile-bottom a{
min-height:44px !important;
padding:4px 2px !important;
}
}
@media (max-width:370px){
body.b2b-dashboard-page .b2b-sidebar{
width:calc(100vw - 104px) !important;
max-width:calc(100vw - 104px) !important;
}
body.b2b-dashboard-page .b2b-topbar{
padding-left:calc(100vw - 100px) !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
max-width:142px !important;
font-size:18px !important;
}
body.b2b-dashboard-page .b2b-dash-brand small{
max-width:140px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row{
grid-template:
"photo info" 170px
"tracking tracking" auto
"products products" auto
"stock stock" auto
/ minmax(98px,32%) minmax(0,1fr) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers .shipment-photo,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers .shipment-info{
height:170px !important;
min-height:170px !important;
max-height:170px !important;
}
}
/* 2026-08-24 owner screenshot pass: mobile app shell containment and card stability. */
@media (max-width:767px){
body.b2b-dashboard-page{
--b2b-mobile-header-h:58px;
--b2b-bottom-nav-h:calc(66px + env(safe-area-inset-bottom, 0px));
padding-top:var(--b2b-mobile-header-h) !important;
padding-bottom:var(--b2b-bottom-nav-h) !important;
overflow-x:hidden !important;
background:#f5fafb !important;
}
body.b2b-dashboard-page .b2b-sidebar{
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
z-index:220 !important;
height:var(--b2b-mobile-header-h) !important;
min-height:var(--b2b-mobile-header-h) !important;
padding:8px 12px !important;
overflow:visible !important;
border-bottom:1px solid rgba(8,37,65,.08) !important;
background:rgba(255,255,255,.96) !important;
color:#061b33 !important;
box-shadow:0 8px 24px rgba(6,27,51,.08) !important;
backdrop-filter:blur(16px) !important;
-webkit-backdrop-filter:blur(16px) !important;
}
body.b2b-dashboard-page .b2b-dash-brand{
width:calc(100vw - 132px) !important;
max-width:252px !important;
min-height:42px !important;
padding:0 !important;
gap:8px !important;
color:#061b33 !important;
}
body.b2b-dashboard-page .b2b-dash-brand img{
width:42px !important;
height:42px !important;
flex:0 0 42px !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
color:#061b33 !important;
font-size:19px !important;
line-height:1 !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page .b2b-dash-brand small{
color:#52697a !important;
font-size:7.5px !important;
letter-spacing:.04em !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page .b2b-topbar{
position:fixed !important;
top:0 !important;
right:8px !important;
z-index:225 !important;
width:auto !important;
min-width:0 !important;
height:var(--b2b-mobile-header-h) !important;
min-height:var(--b2b-mobile-header-h) !important;
padding:9px 0 !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:6px !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
body.b2b-dashboard-page .b2b-topbar > div:first-child,
body.b2b-dashboard-page .b2b-topbar .b2b-search,
body.b2b-dashboard-page .b2b-topbar .b2b-account-menu{
display:none !important;
}
body.b2b-dashboard-page .b2b-top-actions{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:6px !important;
}
body.b2b-dashboard-page .b2b-language-btn,
body.b2b-dashboard-page .b2b-notification-btn,
body.b2b-dashboard-page .b2b-menu-btn{
width:36px !important;
min-width:36px !important;
height:36px !important;
min-height:36px !important;
border-radius:13px !important;
background:#ffffff !important;
color:#061b33 !important;
border:1px solid rgba(8,37,65,.08) !important;
box-shadow:0 8px 18px rgba(6,27,51,.08) !important;
}
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-open .b2b-sidebar-panel{
position:fixed !important;
top:calc(var(--b2b-mobile-header-h) + 8px) !important;
left:10px !important;
right:10px !important;
bottom:76px !important;
z-index:224 !important;
display:block !important;
width:auto !important;
max-width:none !important;
height:auto !important;
max-height:calc(100dvh - var(--b2b-mobile-header-h) - 84px) !important;
margin:0 !important;
padding:10px 10px 14px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:touch !important;
border:1px solid rgba(8,37,65,.10) !important;
border-radius:20px !important;
background:linear-gradient(180deg,#08223d 0%,#05182d 100%) !important;
box-shadow:0 18px 44px rgba(3,18,32,.28) !important;
}
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-open .b2b-global-sidebar-nav{
display:grid !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-open .b2b-global-sidebar-nav a,
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-open .b2b-global-sidebar-nav .b2b-side-tool{
min-height:50px !important;
padding:9px 10px !important;
border-radius:14px !important;
}
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-open .b2b-side-primary b,
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-open .b2b-side-tool b{
font-size:12px !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-open .b2b-side-primary small,
body.b2b-dashboard-page .b2b-sidebar.is-sidebar-open .b2b-side-tool small{
font-size:9.2px !important;
line-height:1.2 !important;
}
body.b2b-dashboard-page .b2b-dash-content{
padding-top:12px !important;
padding-bottom:calc(var(--b2b-bottom-nav-h) + 18px) !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn{
position:relative !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
z-index:12 !important;
width:auto !important;
min-width:0 !important;
max-width:132px !important;
min-height:36px !important;
margin:-44px 0 8px 10px !important;
grid-template-columns:24px minmax(0,1fr) !important;
transform:none !important;
}
body.b2b-dashboard-page .b2b-market-visual,
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map{
min-height:104px !important;
height:104px !important;
max-height:104px !important;
border-radius:18px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-market-visual .b2b-tracking-map,
body.b2b-dashboard-page .b2b-market-visual .leaflet-container{
min-height:104px !important;
height:104px !important;
}
body.b2b-dashboard-page .b2b-market-search-row{
position:relative !important;
z-index:10 !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
min-height:44px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search input,
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search input[type="search"]{
height:32px !important;
font-size:16px !important;
line-height:32px !important;
}
body.b2b-dashboard-page .b2b-grand-search-panel{
left:0 !important;
right:0 !important;
width:auto !important;
max-height:96px !important;
overflow:auto !important;
border-radius:14px !important;
box-shadow:0 14px 30px rgba(6,27,51,.13) !important;
}
body.b2b-dashboard-page .b2b-grand-search-option{
min-height:38px !important;
padding:7px 9px !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters{
margin:0 0 8px !important;
padding:0 0 9px !important;
}
body.b2b-dashboard-page .b2b-board-toolbar .b2b-tabs{
display:none !important;
}
body.b2b-dashboard-page .b2b-mobile-request-strip{
min-height:42px !important;
margin:0 0 8px !important;
padding:7px 9px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page #all-containers .shipment-row{
grid-template:
"photo info" auto
"tracking tracking" auto
"stock stock" auto
/ minmax(92px,30%) minmax(0,1fr) !important;
gap:0 !important;
margin:0 0 12px !important;
border-radius:18px !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo{
min-height:108px !important;
height:100% !important;
border-radius:16px 0 0 0 !important;
}
body.b2b-dashboard-page #all-containers .shipment-info{
min-width:0 !important;
padding:8px 8px 6px !important;
}
body.b2b-dashboard-page #all-containers .shipment-route-title{
margin:0 0 8px !important;
}
body.b2b-dashboard-page #all-containers .shipment-route-title span{
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10.5px !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:7px !important;
padding:0 !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts span{
min-height:34px !important;
padding:6px !important;
border-radius:11px !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts span:nth-child(n+3){
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts small{
font-size:7.5px !important;
line-height:1 !important;
}
body.b2b-dashboard-page #all-containers .shipment-facts b{
font-size:10px !important;
line-height:1.12 !important;
overflow-wrap:anywhere !important;
}
body.b2b-dashboard-page #all-containers .shipment-products{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
padding:7px 9px 8px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail{
padding-bottom:2px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail span{
flex-basis:56px !important;
min-width:56px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail::before{
top:15px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail i{
width:23px !important;
height:23px !important;
font-size:10px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail b{
max-width:54px !important;
font-size:6.8px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail small{
max-width:54px !important;
font-size:6.2px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock{
grid-template-columns:38px minmax(0,1fr) minmax(0,1fr) !important;
gap:6px !important;
padding:7px 8px 9px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-mobile-card-more{
grid-column:1 !important;
grid-row:1 !important;
width:38px !important;
min-width:38px !important;
height:36px !important;
min-height:36px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a.b2b-sparkle-cta{
grid-column:3 !important;
grid-row:1 !important;
min-height:36px !important;
font-size:10px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a:not(.b2b-sparkle-cta),
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-commercial-disabled{
grid-column:2 !important;
grid-row:1 !important;
min-height:36px !important;
padding-inline:7px !important;
font-size:9.2px !important;
}
body.b2b-dashboard-page .b2b-modal-card.b2b-lux-detail{
padding-top:calc(env(safe-area-inset-top,0px) + 52px) !important;
padding-bottom:calc(var(--b2b-bottom-nav-h) + 16px) !important;
}
body.b2b-dashboard-page .b2b-exec-banner,
body.b2b-dashboard-page .b2b-action-center,
body.b2b-dashboard-page .b2b-compact-purchase{
border-radius:18px !important;
}
body.b2b-dashboard-page .b2b-action-center-grid{
gap:8px !important;
}
body.b2b-dashboard-page .b2b-action-card{
padding:10px !important;
}
body.b2b-dashboard-page .b2b-action-card button{
min-height:40px !important;
font-size:10.5px !important;
}
body.b2b-dashboard-page .b2b-request-shell-panel{
padding-top:calc(50px + env(safe-area-inset-top,0px)) !important;
padding-bottom:calc(var(--b2b-bottom-nav-h) + 18px) !important;
}
body.b2b-dashboard-page .b2b-mobile-bottom{
z-index:230 !important;
}
}
@media (max-width:360px){
body.b2b-dashboard-page .b2b-dash-brand{
width:calc(100vw - 124px) !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
font-size:17px !important;
}
body.b2b-dashboard-page .b2b-dash-brand small{
font-size:6.8px !important;
}
body.b2b-dashboard-page .b2b-language-btn,
body.b2b-dashboard-page .b2b-notification-btn,
body.b2b-dashboard-page .b2b-menu-btn{
width:32px !important;
min-width:32px !important;
height:32px !important;
min-height:32px !important;
}
body.b2b-dashboard-page #all-containers .shipment-row{
grid-template-columns:88px minmax(0,1fr) !important;
}
body.b2b-dashboard-page #all-containers .shipment-photo{
min-height:104px !important;
}
body.b2b-dashboard-page #all-containers .shipment-info{
padding:7px 7px 5px !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
padding:6px 7px 7px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail span{
flex-basis:52px !important;
min-width:52px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail b{
max-width:50px !important;
font-size:6.4px !important;
}
body.b2b-dashboard-page #all-containers .mini-track-rail small{
max-width:50px !important;
font-size:6px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock{
grid-template-columns:34px minmax(0,1fr) minmax(0,1fr) !important;
gap:5px !important;
padding:6px 7px 8px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-mobile-card-more{
width:34px !important;
min-width:34px !important;
height:34px !important;
min-height:34px !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a.b2b-sparkle-cta,
body.b2b-dashboard-page #all-containers .shipment-stock a:not(.b2b-sparkle-cta),
body.b2b-dashboard-page #all-containers .shipment-stock .b2b-commercial-disabled{
min-height:34px !important;
font-size:8.6px !important;
padding-inline:5px !important;
}
}
/* 2026-08-24 final mobile containment: override older stronger card rules. */
@media (max-width:767px){
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row{
grid-template:
"photo info" 132px
"tracking tracking" auto
"stock stock" auto
/ minmax(88px, 30%) minmax(0, 1fr) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers .shipment-photo{
height:132px !important;
min-height:132px !important;
max-height:132px !important;
align-self:stretch !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers .shipment-info{
height:132px !important;
min-height:0 !important;
max-height:132px !important;
align-self:stretch !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:first-child,
body.b2b-dashboard-page section#all-containers .shipment-facts span:first-child{
display:block !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:nth-child(n+3),
body.b2b-dashboard-page section#all-containers .shipment-facts span:nth-child(n+3){
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-mini-tracking,
body.b2b-dashboard-page section#all-containers .shipment-mini-tracking{
padding:6px 8px 7px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .mini-track-rail span,
body.b2b-dashboard-page section#all-containers .mini-track-rail span{
flex-basis:54px !important;
min-width:54px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .mini-track-rail i,
body.b2b-dashboard-page section#all-containers .mini-track-rail i{
width:22px !important;
height:22px !important;
font-size:9px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .mini-track-rail::before,
body.b2b-dashboard-page section#all-containers .mini-track-rail::before{
top:14px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .mini-track-rail b,
body.b2b-dashboard-page section#all-containers .mini-track-rail b{
max-width:52px !important;
min-height:18px !important;
font-size:6.4px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .mini-track-rail small,
body.b2b-dashboard-page section#all-containers .mini-track-rail small{
max-width:52px !important;
font-size:6px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock,
body.b2b-dashboard-page section#all-containers .shipment-stock{
grid-template-columns:36px minmax(0,1fr) minmax(0,1fr) !important;
gap:6px !important;
padding:6px 8px 8px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock .b2b-mobile-card-more,
body.b2b-dashboard-page section#all-containers .shipment-stock .b2b-mobile-card-more{
grid-column:1 !important;
grid-row:1 !important;
width:36px !important;
min-width:36px !important;
height:34px !important;
min-height:34px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta{
grid-column:3 !important;
grid-row:1 !important;
min-height:34px !important;
font-size:9px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a:not(.b2b-sparkle-cta),
body.b2b-dashboard-page section#all-containers .shipment-stock a:not(.b2b-sparkle-cta),
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock .b2b-commercial-disabled,
body.b2b-dashboard-page section#all-containers .shipment-stock .b2b-commercial-disabled{
grid-column:2 !important;
grid-row:1 !important;
min-height:34px !important;
padding-inline:6px !important;
font-size:8.8px !important;
}
}
/* 2026-08-25 final owner-approved mobile B2B homepage overrides. */
@media (max-width:767px){
body.b2b-dashboard-page{
background:#f6f8fb !important;
}
body.b2b-dashboard-page .b2b-sidebar,
body.b2b-dashboard-page .b2b-topbar,
body.b2b-dashboard-page .b2b-mobile-bottom{
background:linear-gradient(135deg,#061b33 0%,#082744 100%) !important;
border-color:rgba(255,255,255,.1) !important;
}
body.b2b-dashboard-page .b2b-dash-brand b,
body.b2b-dashboard-page .b2b-dash-brand small,
body.b2b-dashboard-page .b2b-page-identity b,
body.b2b-dashboard-page .b2b-page-identity small{
color:#fff !important;
}
body.b2b-dashboard-page .b2b-dash-brand small,
body.b2b-dashboard-page .b2b-page-identity small{
color:rgba(218,235,255,.78) !important;
}
body.b2b-dashboard-page .b2b-language-btn,
body.b2b-dashboard-page .b2b-notification-btn,
body.b2b-dashboard-page .b2b-vip-icon,
body.b2b-dashboard-page .b2b-menu-btn{
background:rgba(255,255,255,.08) !important;
border-color:rgba(255,255,255,.16) !important;
color:#fff !important;
}
body.b2b-dashboard-page .b2b-vip-icon{
color:#f5c85f !important;
}
body.b2b-dashboard-page .b2b-mobile-request-strip{
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row{
grid-template:
"photo info" 136px
"tracking tracking" auto
"products products" auto
"stock stock" auto
/ minmax(104px,31%) minmax(0,1fr) !important;
border-radius:20px !important;
overflow:hidden !important;
background:#fff !important;
border:1px solid rgba(9,36,67,.08) !important;
box-shadow:0 14px 34px rgba(6,27,51,.12) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers .shipment-photo{
height:136px !important;
min-height:136px !important;
max-height:136px !important;
border-radius:18px 0 0 0 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers .shipment-info{
min-height:136px !important;
height:136px !important;
padding:9px 10px 7px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-route-title span,
body.b2b-dashboard-page section#all-containers .shipment-route-title span{
font-size:10px !important;
line-height:1.08 !important;
color:#061b33 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts,
body.b2b-dashboard-page section#all-containers .shipment-facts{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:6px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:nth-child(n+5),
body.b2b-dashboard-page section#all-containers .shipment-facts span:nth-child(n+5){
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products,
body.b2b-dashboard-page section#all-containers .shipment-products{
grid-area:products !important;
display:flex !important;
flex-wrap:wrap !important;
gap:7px !important;
padding:8px 9px 9px !important;
background:#fbfdff !important;
border-top:1px solid rgba(9,36,67,.08) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3,
body.b2b-dashboard-page section#all-containers .shipment-products h3{
flex:0 0 100% !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
margin:0 !important;
font-size:10px !important;
color:#061b33 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3 small,
body.b2b-dashboard-page section#all-containers .shipment-products h3 small{
display:inline-flex !important;
font-size:8px !important;
font-weight:800 !important;
color:#168796 !important;
text-transform:uppercase !important;
letter-spacing:.06em !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3 button,
body.b2b-dashboard-page section#all-containers .shipment-products h3 button{
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card,
body.b2b-dashboard-page section#all-containers .shipment-product-card{
flex:1 1 calc(33.333% - 6px) !important;
min-width:88px !important;
max-width:calc(33.333% - 4px) !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:5px !important;
padding:6px !important;
border-radius:14px !important;
background:#fff !important;
border:1px solid rgba(9,36,67,.08) !important;
box-shadow:0 8px 20px rgba(6,27,51,.07) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card img,
body.b2b-dashboard-page section#all-containers .shipment-product-card img{
width:100% !important;
height:42px !important;
border-radius:10px !important;
object-fit:cover !important;
background:#eef6f9 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card b,
body.b2b-dashboard-page section#all-containers .shipment-product-card b{
display:block !important;
font-size:8.2px !important;
line-height:1.14 !important;
color:#061b33 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card small,
body.b2b-dashboard-page section#all-containers .shipment-product-card small{
display:block !important;
font-size:6.8px !important;
color:#748293 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card strong,
body.b2b-dashboard-page section#all-containers .shipment-product-card strong{
font-size:8px !important;
color:#0d7988 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card strong small,
body.b2b-dashboard-page section#all-containers .shipment-product-card strong small,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card em,
body.b2b-dashboard-page section#all-containers .shipment-product-card em{
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products-more,
body.b2b-dashboard-page section#all-containers .shipment-products-more{
flex:1 1 100% !important;
min-height:28px !important;
border-radius:12px !important;
font-size:9px !important;
background:#eef8fa !important;
color:#087584 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-mini-tracking,
body.b2b-dashboard-page section#all-containers .shipment-mini-tracking{
grid-area:tracking !important;
background:#fff !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock,
body.b2b-dashboard-page section#all-containers .shipment-stock{
grid-area:stock !important;
grid-template-columns:40px minmax(0,1fr) !important;
gap:8px !important;
padding:9px !important;
background:#fff !important;
border-top:1px solid rgba(9,36,67,.08) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock .b2b-mobile-card-more,
body.b2b-dashboard-page section#all-containers .shipment-stock .b2b-mobile-card-more{
grid-column:1 !important;
grid-row:1 !important;
width:40px !important;
min-width:40px !important;
height:38px !important;
min-height:38px !important;
border-radius:13px !important;
background:#f6f1e5 !important;
color:#a97315 !important;
border:1px solid rgba(202,150,54,.28) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta{
grid-column:2 !important;
grid-row:1 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:38px !important;
padding:8px 10px !important;
border-radius:13px !important;
background:linear-gradient(135deg,#c99636 0%,#f1ce72 52%,#b9771f 100%) !important;
color:#061b33 !important;
font-size:10px !important;
font-weight:900 !important;
box-shadow:0 10px 22px rgba(177,122,34,.22) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a:not(.b2b-sparkle-cta),
body.b2b-dashboard-page section#all-containers .shipment-stock a:not(.b2b-sparkle-cta),
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock .b2b-commercial-disabled,
body.b2b-dashboard-page section#all-containers .shipment-stock .b2b-commercial-disabled{
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .stock-panel,
body.b2b-dashboard-page section#all-containers .stock-panel{
grid-column:1 / -1 !important;
grid-row:2 !important;
}
body.b2b-dashboard-page .b2b-label-desktop{
display:none !important;
}
body.b2b-dashboard-page .b2b-label-mobile{
display:inline !important;
}
body.b2b-dashboard-page input,
body.b2b-dashboard-page select,
body.b2b-dashboard-page textarea{
font-size:16px !important;
}
}
@media (max-width:370px){
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row{
grid-template:
"photo info" 130px
"tracking tracking" auto
"products products" auto
"stock stock" auto
/ 96px minmax(0,1fr) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers .shipment-photo,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers .shipment-info{
height:130px !important;
min-height:130px !important;
max-height:130px !important;
}
}
body.b2b-dashboard-page .b2b-label-mobile{
display:none !important;
}
body.b2b-dashboard-page .b2b-label-desktop{
display:inline !important;
}
@media (max-width:767px){
body.b2b-dashboard-page .b2b-label-desktop{
display:none !important;
}
body.b2b-dashboard-page .b2b-label-mobile{
display:inline !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta .b2b-label-mobile,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta .b2b-label-mobile{
display:inline !important;
visibility:visible !important;
opacity:1 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta .b2b-label-desktop,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta .b2b-label-desktop{
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3::before,
body.b2b-dashboard-page section#all-containers .shipment-products h3::before{
content:none !important;
display:none !important;
}
}
/* 2026-08-25 mobile visual-conformance correction from owner email. */
@media (max-width:767px){
html,
body.b2b-dashboard-page{
width:100% !important;
max-width:100% !important;
overflow-x:hidden !important;
background:#f5f8fb !important;
}
body.b2b-dashboard-page .b2b-app-shell,
body.b2b-dashboard-page .b2b-dash-main,
body.b2b-dashboard-page .b2b-content,
body.b2b-dashboard-page main{
width:100% !important;
max-width:100vw !important;
overflow-x:hidden !important;
}
body.b2b-dashboard-page .b2b-sidebar{
left:0 !important;
right:auto !important;
width:calc(100vw - 136px) !important;
max-width:calc(100vw - 136px) !important;
height:66px !important;
padding:8px 8px 8px 14px !important;
border-radius:0 !important;
border:0 !important;
box-shadow:none !important;
}
body.b2b-dashboard-page .b2b-dash-brand{
width:100% !important;
height:50px !important;
min-height:50px !important;
padding:0 !important;
margin:0 !important;
gap:8px !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
body.b2b-dashboard-page .b2b-dash-brand img{
width:46px !important;
height:46px !important;
min-width:46px !important;
border:2px solid rgba(245,199,92,.75) !important;
box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
font-size:22px !important;
line-height:1 !important;
letter-spacing:-.01em !important;
}
body.b2b-dashboard-page .b2b-dash-brand small{
margin-top:3px !important;
font-size:7.3px !important;
line-height:1 !important;
letter-spacing:.05em !important;
color:#f5c85f !important;
}
body.b2b-dashboard-page .b2b-sidebar-toggle-icon{
display:none !important;
}
body.b2b-dashboard-page .b2b-dash-brand > i,
body.b2b-dashboard-page .b2b-dash-brand .fa-chevron-down{
display:none !important;
}
body.b2b-dashboard-page .b2b-topbar{
left:0 !important;
right:0 !important;
height:66px !important;
min-height:66px !important;
padding:10px 12px 10px calc(100vw - 132px) !important;
border-radius:0 !important;
box-shadow:0 12px 26px rgba(3,12,28,.2) !important;
}
body.b2b-dashboard-page .b2b-top-actions{
gap:7px !important;
justify-content:flex-end !important;
}
body.b2b-dashboard-page .b2b-language-btn,
body.b2b-dashboard-page .b2b-notification-btn,
body.b2b-dashboard-page .b2b-menu-btn{
width:36px !important;
min-width:36px !important;
height:36px !important;
min-height:36px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page .b2b-language-btn b,
body.b2b-dashboard-page .b2b-language-btn i,
body.b2b-dashboard-page .b2b-vip-icon,
body.b2b-dashboard-page .b2b-page-identity{
display:none !important;
}
body.b2b-dashboard-page .b2b-content{
padding-top:18px !important;
}
body.b2b-dashboard-page .b2b-market-visual,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-map,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-visual .b2b-live-map,
body.b2b-dashboard-page .b2b-market-banner-window,
body.b2b-dashboard-page .b2b-market-banner-track,
body.b2b-dashboard-page .b2b-market-banner-slide{
height:184px !important;
min-height:184px !important;
max-height:184px !important;
border-radius:19px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide{
padding:28px 52px 28px 30px !important;
align-items:center !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide h2{
max-width:250px !important;
font-size:30px !important;
line-height:1.04 !important;
color:#fff !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide p{
max-width:250px !important;
font-size:13px !important;
color:#fff !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide a{
min-height:38px !important;
padding:10px 16px !important;
font-size:12px !important;
border-radius:10px !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn{
display:none !important;
}
body.b2b-dashboard-page .b2b-market-search-row{
margin:14px 0 10px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
min-height:58px !important;
border-radius:18px !important;
padding:8px 8px 8px 12px !important;
box-shadow:0 12px 28px rgba(6,27,51,.08) !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search-icon{
width:36px !important;
height:36px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search input,
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search input[type="search"]{
height:40px !important;
font-size:16px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search button[type="submit"]{
width:44px !important;
min-width:44px !important;
height:44px !important;
border-radius:14px !important;
font-size:0 !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search button[type="submit"] i{
display:inline-flex !important;
font-size:16px !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters{
gap:10px !important;
padding-bottom:10px !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters button{
min-height:54px !important;
padding:0 18px !important;
border-radius:22px !important;
font-size:13px !important;
box-shadow:0 9px 22px rgba(6,27,51,.08) !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters button.active{
background:#061b33 !important;
color:#fff !important;
border-color:#e2a83a !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row{
grid-template:
"photo info" 210px
"tracking tracking" auto
"products products" auto
"stock stock" auto
/ 31% minmax(0,1fr) !important;
width:100% !important;
max-width:100% !important;
margin:0 0 14px !important;
border-radius:22px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers .shipment-photo{
height:210px !important;
min-height:210px !important;
max-height:210px !important;
border-radius:18px 0 0 0 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers .shipment-info{
height:210px !important;
min-height:210px !important;
max-height:210px !important;
padding:14px 10px 10px 12px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-route-title,
body.b2b-dashboard-page section#all-containers .shipment-route-title{
display:flex !important;
align-items:center !important;
flex-wrap:nowrap !important;
margin-bottom:11px !important;
gap:6px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-route-title span,
body.b2b-dashboard-page section#all-containers .shipment-route-title span{
flex:0 1 auto !important;
min-width:0 !important;
max-width:none !important;
font-size:12px !important;
line-height:1.1 !important;
font-weight:900 !important;
text-transform:uppercase !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-route-title span:first-child,
body.b2b-dashboard-page section#all-containers .shipment-route-title span:first-child{
flex:0 1 92px !important;
max-width:92px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-route-title span:last-child,
body.b2b-dashboard-page section#all-containers .shipment-route-title span:last-child{
flex:1 1 auto !important;
max-width:118px !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-route-title i,
body.b2b-dashboard-page section#all-containers .shipment-route-title i{
flex:0 0 auto !important;
font-size:11px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts,
body.b2b-dashboard-page section#all-containers .shipment-facts{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span,
body.b2b-dashboard-page section#all-containers .shipment-facts span{
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:first-child,
body.b2b-dashboard-page section#all-containers .shipment-facts span:first-child{
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:nth-child(2),
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:nth-child(3),
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:nth-child(8),
body.b2b-dashboard-page section#all-containers .shipment-facts span:nth-child(2),
body.b2b-dashboard-page section#all-containers .shipment-facts span:nth-child(3),
body.b2b-dashboard-page section#all-containers .shipment-facts span:nth-child(8){
display:flex !important;
flex-direction:column !important;
min-height:58px !important;
justify-content:center !important;
align-items:center !important;
padding:9px 6px !important;
border-radius:13px !important;
text-align:center !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:nth-child(8),
body.b2b-dashboard-page section#all-containers .shipment-facts span:nth-child(8){
border:1px solid rgba(35,130,222,.22) !important;
background:#f7fbff !important;
min-height:48px !important;
padding-block:7px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts small,
body.b2b-dashboard-page section#all-containers .shipment-facts small{
font-size:8px !important;
line-height:1.1 !important;
white-space:nowrap !important;
overflow-wrap:normal !important;
word-break:normal !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts b,
body.b2b-dashboard-page section#all-containers .shipment-facts b{
display:block !important;
max-width:100% !important;
font-size:10px !important;
line-height:1.12 !important;
letter-spacing:0 !important;
white-space:normal !important;
overflow-wrap:normal !important;
word-break:normal !important;
hyphens:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .mini-track-rail,
body.b2b-dashboard-page section#all-containers .mini-track-rail{
display:grid !important;
grid-template-columns:repeat(6,minmax(0,1fr)) !important;
gap:0 !important;
overflow:visible !important;
padding:0 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .mini-track-rail span,
body.b2b-dashboard-page section#all-containers .mini-track-rail span{
min-width:0 !important;
flex-basis:auto !important;
padding:0 1px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .mini-track-rail span:nth-child(n+7),
body.b2b-dashboard-page section#all-containers .mini-track-rail span:nth-child(n+7){
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .mini-track-rail::before,
body.b2b-dashboard-page section#all-containers .mini-track-rail::before{
left:7% !important;
right:7% !important;
top:18px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .mini-track-rail i,
body.b2b-dashboard-page section#all-containers .mini-track-rail i{
width:32px !important;
height:32px !important;
font-size:12px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .mini-track-rail b,
body.b2b-dashboard-page section#all-containers .mini-track-rail b{
max-width:58px !important;
font-size:8.2px !important;
line-height:1.05 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .mini-track-rail small,
body.b2b-dashboard-page section#all-containers .mini-track-rail small{
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products,
body.b2b-dashboard-page section#all-containers .shipment-products{
padding:12px !important;
gap:10px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card,
body.b2b-dashboard-page section#all-containers .shipment-product-card{
min-width:0 !important;
border-radius:13px !important;
padding:0 0 8px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card img,
body.b2b-dashboard-page section#all-containers .shipment-product-card img{
height:58px !important;
border-radius:0 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card span,
body.b2b-dashboard-page section#all-containers .shipment-product-card span,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-product-card strong,
body.b2b-dashboard-page section#all-containers .shipment-product-card strong{
padding-inline:8px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock,
body.b2b-dashboard-page section#all-containers .shipment-stock{
grid-template-columns:48px minmax(0,1fr) !important;
padding:12px !important;
gap:10px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock .b2b-mobile-card-more,
body.b2b-dashboard-page section#all-containers .shipment-stock .b2b-mobile-card-more{
width:48px !important;
min-width:48px !important;
height:48px !important;
min-height:48px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta{
min-height:48px !important;
border-radius:12px !important;
background:linear-gradient(135deg,#f7c653 0%,#e6a11f 100%) !important;
color:#061b33 !important;
box-shadow:0 12px 24px rgba(198,139,31,.22) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta span,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta span{
display:inline !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
color:#061b33 !important;
font-size:15px !important;
font-weight:900 !important;
letter-spacing:0 !important;
text-transform:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta .b2b-label-desktop,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta .b2b-label-desktop{
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta .fa-arrow-right-long,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta .fa-arrow-right-long{
color:#061b33 !important;
font-size:14px !important;
}
}
@media (max-width:370px){
body.b2b-dashboard-page .b2b-sidebar{
width:calc(100vw - 124px) !important;
max-width:calc(100vw - 124px) !important;
}
body.b2b-dashboard-page .b2b-topbar{
padding-left:calc(100vw - 120px) !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
font-size:20px !important;
}
body.b2b-dashboard-page .b2b-language-btn,
body.b2b-dashboard-page .b2b-notification-btn,
body.b2b-dashboard-page .b2b-menu-btn{
width:34px !important;
min-width:34px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-route-title span,
body.b2b-dashboard-page section#all-containers .shipment-route-title span{
font-size:11px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta span,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta span{
font-size:13px !important;
}
}
/* 2026-08-25 emergency mobile repair: stable app header + banner-first home. */
@media (max-width:767px){
body.b2b-dashboard-page .b2b-sidebar{
position:fixed !important;
z-index:320 !important;
top:0 !important;
left:0 !important;
width:calc(100vw - 128px) !important;
max-width:calc(100vw - 128px) !important;
height:66px !important;
min-height:66px !important;
padding:9px 4px 8px 13px !important;
background:linear-gradient(135deg,#061b33 0%,#082744 100%) !important;
overflow:visible !important;
}
body.b2b-dashboard-page .b2b-topbar{
z-index:310 !important;
top:0 !important;
height:66px !important;
min-height:66px !important;
padding:10px 12px 10px calc(100vw - 126px) !important;
background:linear-gradient(135deg,#061b33 0%,#082744 100%) !important;
}
body.b2b-dashboard-page .b2b-dash-brand{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height:49px !important;
min-height:49px !important;
gap:8px !important;
opacity:1 !important;
visibility:visible !important;
}
body.b2b-dashboard-page .b2b-dash-brand img{
display:block !important;
width:47px !important;
height:47px !important;
min-width:47px !important;
object-fit:contain !important;
}
body.b2b-dashboard-page .b2b-dash-brand span{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
display:block !important;
max-width:180px !important;
font-size:21px !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
color:#fff !important;
}
body.b2b-dashboard-page .b2b-dash-brand small{
display:block !important;
max-width:178px !important;
margin-top:4px !important;
font-size:7px !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
color:#f5c85f !important;
}
body.b2b-dashboard-page .b2b-content,
body.b2b-dashboard-page .b2b-dash-content{
padding-top:16px !important;
}
body.b2b-dashboard-page .b2b-market-visual.is-map-mode .b2b-visual-map{
display:none !important;
}
body.b2b-dashboard-page .b2b-market-visual.is-map-mode .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-visual.is-banner-mode .b2b-visual-banner{
display:block !important;
}
body.b2b-dashboard-page .b2b-market-visual{
height:184px !important;
min-height:184px !important;
max-height:184px !important;
margin:0 0 14px !important;
border-radius:18px !important;
overflow:hidden !important;
background:#061b33 !important;
}
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-banner-track,
body.b2b-dashboard-page .b2b-market-banner-slide{
height:184px !important;
min-height:184px !important;
max-height:184px !important;
border-radius:18px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide{
padding:22px 54px 34px 28px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide small{
display:block !important;
max-width:230px !important;
margin:0 0 8px !important;
font-size:10px !important;
color:#f5c85f !important;
letter-spacing:.08em !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide h2{
max-width:236px !important;
margin:0 !important;
font-size:25px !important;
line-height:1.02 !important;
letter-spacing:-.02em !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide p{
max-width:250px !important;
margin:9px 0 12px !important;
font-size:11px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide a{
display:inline-flex !important;
max-width:214px !important;
min-height:34px !important;
padding:8px 13px !important;
font-size:10px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.b2b-dashboard-page .b2b-banner-arrow{
width:34px !important;
height:34px !important;
opacity:.86 !important;
transform:translateY(-10%) !important;
}
body.b2b-dashboard-page .b2b-banner-arrow.prev{
left:8px !important;
}
body.b2b-dashboard-page .b2b-banner-arrow.next{
right:8px !important;
}
body.b2b-dashboard-page .b2b-banner-dots{
left:50% !important;
right:auto !important;
bottom:11px !important;
transform:translateX(-50%) !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
z-index:5 !important;
}
body.b2b-dashboard-page .b2b-banner-dots button{
width:8px !important;
height:8px !important;
min-width:8px !important;
border-radius:999px !important;
}
body.b2b-dashboard-page .b2b-banner-dots button.is-active{
width:24px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row{
grid-template:
"photo info" 210px
"tracking tracking" auto
"products products" auto
"stock stock" auto
/ minmax(104px,31%) minmax(0,1fr) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers .shipment-photo,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers .shipment-info{
height:210px !important;
min-height:210px !important;
max-height:210px !important;
}
body.b2b-dashboard-page .b2b-dash-brand .b2b-sidebar-toggle-icon,
body.b2b-dashboard-page .b2b-dash-brand > .b2b-sidebar-toggle-icon,
body.b2b-dashboard-page .b2b-dash-brand > i.fa-chevron-down{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
}
/* 2026-08-25 desktop restore: keep View Details crisp white on PC cards. */
@media (min-width:768px){
body.b2b-dashboard-page #all-containers .shipment-stock a.b2b-sparkle-cta,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta{
color:#ffffff !important;
text-shadow:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a.b2b-sparkle-cta .b2b-label-desktop,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta .b2b-label-desktop,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta .b2b-label-desktop{
display:inline !important;
padding:0 !important;
color:#ffffff !important;
opacity:1 !important;
filter:none !important;
text-shadow:none !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a.b2b-sparkle-cta .b2b-label-mobile,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta .b2b-label-mobile,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta .b2b-label-mobile{
display:none !important;
}
body.b2b-dashboard-page #all-containers .shipment-stock a.b2b-sparkle-cta .fa-arrow-right-long,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta .fa-arrow-right-long,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta .fa-arrow-right-long{
color:#ffffff !important;
}
}
/* 2026-08-25 final mobile compaction lock: this must remain after older mobile fixes. */
@media screen and (max-width:767px){
body.b2b-dashboard-page{
padding-top:0 !important;
overflow-x:hidden !important;
}
body.b2b-dashboard-page .b2b-app-shell{
margin-top:0 !important;
transform:none !important;
}
body.b2b-dashboard-page .b2b-dash-main{
padding-top:58px !important;
}
body.b2b-dashboard-page .b2b-sidebar,
body.b2b-dashboard-page .b2b-topbar{
top:0 !important;
height:58px !important;
min-height:58px !important;
max-height:58px !important;
transform:none !important;
}
body.b2b-dashboard-page .b2b-sidebar{
width:calc(100vw - 112px) !important;
max-width:calc(100vw - 112px) !important;
padding:8px 4px 7px 12px !important;
z-index:340 !important;
}
body.b2b-dashboard-page .b2b-topbar{
padding:9px 10px 9px calc(100vw - 108px) !important;
z-index:330 !important;
}
body.b2b-dashboard-page .b2b-dash-brand{
height:43px !important;
min-height:43px !important;
}
body.b2b-dashboard-page .b2b-dash-brand img{
width:42px !important;
height:42px !important;
min-width:42px !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
max-width:166px !important;
font-size:20px !important;
}
body.b2b-dashboard-page .b2b-dash-brand small{
max-width:160px !important;
margin-top:3px !important;
font-size:6.8px !important;
}
body.b2b-dashboard-page .b2b-top-actions{
height:40px !important;
gap:5px !important;
}
body.b2b-dashboard-page .b2b-language-btn,
body.b2b-dashboard-page .b2b-notification-btn,
body.b2b-dashboard-page .b2b-menu-btn{
width:32px !important;
min-width:32px !important;
height:32px !important;
min-height:32px !important;
}
body.b2b-dashboard-page .b2b-dash-content{
padding:10px 14px 76px !important;
}
body.b2b-dashboard-page .b2b-market-visual,
body.b2b-dashboard-page .b2b-market-visual .b2b-visual-banner,
body.b2b-dashboard-page .b2b-market-banner-track,
body.b2b-dashboard-page .b2b-market-banner-slide{
height:164px !important;
min-height:164px !important;
max-height:164px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-market-visual{
margin:0 0 8px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide{
padding:18px 42px 28px 24px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide small{
margin-bottom:6px !important;
font-size:9px !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide h2{
font-size:23px !important;
line-height:1.02 !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide p{
margin:7px 0 10px !important;
font-size:10.5px !important;
line-height:1.32 !important;
}
body.b2b-dashboard-page .b2b-market-banner-slide a{
min-height:31px !important;
padding:7px 12px !important;
font-size:9.5px !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn,
body.b2b-dashboard-page.b2b-market-banner-active .b2b-floating-map-btn{
position:relative !important;
inset:auto !important;
width:max-content !important;
max-width:128px !important;
height:30px !important;
min-height:30px !important;
margin:0 0 8px !important;
padding:6px 12px !important;
border-radius:999px !important;
font-size:9px !important;
box-shadow:0 8px 18px rgba(24,170,183,.12) !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn span em{
display:none !important;
}
body.b2b-dashboard-page .b2b-floating-map-btn b{
font-size:10px !important;
line-height:1 !important;
}
body.b2b-dashboard-page .b2b-market-search-row{
margin:0 0 10px !important;
height:auto !important;
min-height:0 !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search{
height:50px !important;
min-height:50px !important;
padding:7px 8px 7px 42px !important;
border-radius:16px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search-icon{
left:14px !important;
width:22px !important;
height:22px !important;
font-size:12px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search input,
body.b2b-dashboard-page .b2b-market-search-row .b2b-search.b2b-grand-search input[type="search"]{
height:36px !important;
min-height:36px !important;
font-size:16px !important;
line-height:36px !important;
}
body.b2b-dashboard-page .b2b-market-search-row .b2b-search button[type="submit"]{
width:36px !important;
min-width:36px !important;
height:36px !important;
min-height:36px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters{
margin:0 0 10px !important;
padding:0 0 4px !important;
height:46px !important;
min-height:46px !important;
gap:8px !important;
}
body.b2b-dashboard-page .b2b-mobile-approved-filters button{
height:38px !important;
min-height:38px !important;
padding:8px 14px !important;
border-radius:14px !important;
font-size:11px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board,
body.b2b-dashboard-page section#all-containers.b2b-board{
margin-top:0 !important;
padding-top:0 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row{
grid-template:
"photo info" 176px
"tracking tracking" auto
"products products" auto
"stock stock" auto
/ minmax(104px,31%) minmax(0,1fr) !important;
margin:0 0 12px !important;
gap:0 !important;
border-radius:16px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers .shipment-photo,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers .shipment-info{
height:176px !important;
min-height:176px !important;
max-height:176px !important;
}
body.b2b-dashboard-page #all-containers .shipment-info{
padding:11px 10px !important;
overflow:hidden !important;
}
body.b2b-dashboard-page #all-containers .shipment-route-title,
body.b2b-dashboard-page #all-containers .shipment-route-title span{
font-size:11px !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page #all-containers .shipment-route-title{
margin:0 0 9px !important;
min-height:12px !important;
gap:6px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts,
body.b2b-dashboard-page section#all-containers .shipment-facts{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:7px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span,
body.b2b-dashboard-page section#all-containers .shipment-facts span{
min-height:42px !important;
padding:7px 6px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:nth-child(n+5),
body.b2b-dashboard-page section#all-containers .shipment-facts span:nth-child(n+5){
display:none !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts span:nth-child(8),
body.b2b-dashboard-page section#all-containers .shipment-facts span:nth-child(8){
display:block !important;
grid-column:1 / -1 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts small,
body.b2b-dashboard-page section#all-containers .shipment-facts small{
font-size:7px !important;
line-height:1.05 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-facts b,
body.b2b-dashboard-page section#all-containers .shipment-facts b{
margin-top:3px !important;
font-size:10px !important;
line-height:1.08 !important;
word-break:break-word !important;
}
body.b2b-dashboard-page #all-containers .shipment-mini-tracking{
min-height:0 !important;
padding:8px 10px !important;
gap:6px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products,
body.b2b-dashboard-page section#all-containers .shipment-products{
min-height:0 !important;
padding:10px !important;
gap:8px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3,
body.b2b-dashboard-page section#all-containers .shipment-products h3{
margin:0 0 7px !important;
min-height:0 !important;
gap:4px !important;
font-size:12px !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3 small,
body.b2b-dashboard-page section#all-containers .shipment-products h3 small{
font-size:9px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-products h3 button,
body.b2b-dashboard-page section#all-containers .shipment-products h3 button{
min-height:28px !important;
padding:6px 8px !important;
font-size:9px !important;
border-radius:10px !important;
}
body.b2b-dashboard-page #all-containers .shipment-product img,
body.b2b-dashboard-page #all-containers .shipment-product-card img{
width:42px !important;
height:34px !important;
object-fit:contain !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock,
body.b2b-dashboard-page section#all-containers .shipment-stock{
grid-template-columns:44px minmax(0,1fr) !important;
min-height:0 !important;
padding:9px 10px 10px !important;
gap:8px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock .b2b-mobile-card-more,
body.b2b-dashboard-page section#all-containers .shipment-stock .b2b-mobile-card-more,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta{
height:44px !important;
min-height:44px !important;
border-radius:12px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock .b2b-mobile-card-more,
body.b2b-dashboard-page section#all-containers .shipment-stock .b2b-mobile-card-more{
width:44px !important;
min-width:44px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-stock a.b2b-sparkle-cta span,
body.b2b-dashboard-page section#all-containers .shipment-stock a.b2b-sparkle-cta span{
font-size:13px !important;
line-height:1.1 !important;
}
body.b2b-dashboard-page .b2b-mobile-bottom{
min-height:60px !important;
height:60px !important;
padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
}
}
@media screen and (max-width:370px){
body.b2b-dashboard-page .b2b-sidebar{
width:calc(100vw - 104px) !important;
max-width:calc(100vw - 104px) !important;
}
body.b2b-dashboard-page .b2b-topbar{
padding-left:calc(100vw - 100px) !important;
}
body.b2b-dashboard-page .b2b-dash-brand b{
max-width:142px !important;
font-size:18px !important;
}
body.b2b-dashboard-page .b2b-dash-brand small{
max-width:140px !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-row,
body.b2b-dashboard-page section#all-containers .shipment-row{
grid-template:
"photo info" 170px
"tracking tracking" auto
"products products" auto
"stock stock" auto
/ minmax(98px,32%) minmax(0,1fr) !important;
}
body.b2b-dashboard-page #all-containers.b2b-board .shipment-photo,
body.b2b-dashboard-page section#all-containers .shipment-photo,
body.b2b-dashboard-page #all-containers.b2b-board .shipment-info,
body.b2b-dashboard-page section#all-containers .shipment-info{
height:170px !important;
min-height:170px !important;
max-height:170px !important;
}
}