/*==================================================
SOKOLATI ONGKIR
Manifest UI v3 — "Waybill" identity
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{

/* -- ink / paper base -- */
--st-ink:#1A1A1A;
--st-ink-dark:#000000;
--st-paper:#FAFAFA;
--st-card:#FFFFFF;

/* -- accents (black + orange-amber only) -- */
--st-amber:#F5A623;
--st-amber-dark:#E07B00;
--st-amber-light:#FEEFD6;

--st-success:#1F9D55;
--st-danger:#D64545;

--st-text:#1A1A1A;
--st-text-light:#6E6E6E;
--st-border:#E7E7E7;

--st-radius:18px;
--st-radius-sm:12px;

--st-shadow:0 10px 30px rgba(0,0,0,.07);
--st-shadow-hover:0 22px 48px rgba(0,0,0,.12);

--st-font-display:'Oswald', sans-serif;
--st-font-body:'Plus Jakarta Sans', sans-serif;
--st-font-mono:'Space Mono', monospace;

--st-transition:.28s cubic-bezier(.2,.7,.3,1);

}

*{
box-sizing:border-box;
}

.st-app{
width:100%;
padding:60px 20px 90px;
background:
    radial-gradient(1200px 500px at 100% -10%, rgba(245,166,35,.10), transparent 60%),
    var(--st-paper);
font-family:var(--st-font-body);
color:var(--st-text);
}

.st-container{
max-width:1320px;
margin:auto;
}

/*==================================================
HERO — "manifest stamp"
==================================================*/

.st-hero{
position:relative;
overflow:hidden;
margin-bottom:38px;
border-radius:22px;
padding:58px 60px;
background:var(--st-ink);
color:#fff;
box-shadow:0 25px 55px rgba(11,28,48,.35);
isolation:isolate;
}

.st-hero-content{
position:relative;
z-index:2;
max-width:680px;
}

.st-hero-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 16px;
border-radius:999px;
background:rgba(242,167,27,.16);
border:1px solid rgba(242,167,27,.4);
color:var(--st-amber);
font-family:var(--st-font-mono);
font-size:11.5px;
font-weight:700;
letter-spacing:1.2px;
text-transform:uppercase;
}

.st-hero h1{
margin:18px 0 14px;
font-family:var(--st-font-display);
font-size:44px !important;
font-weight:700;
line-height:1.1;
letter-spacing:.3px;
color:#fff;
text-transform:uppercase;
}

.st-hero p{
font-size:16px;
line-height:1.8;
color:rgba(255,255,255,.72);
margin:0;
max-width:520px;
}

.st-hero-pattern{
position:absolute;
right:-120px;
top:-140px;
width:420px;
height:420px;
border-radius:50%;
background:radial-gradient(circle, rgba(245,166,35,.22), transparent 70%);
z-index:1;
}

.st-hero::after{
content:"";
position:absolute;
right:60px;
bottom:-90px;
width:220px;
height:220px;
border-radius:50%;
background:rgba(245,166,35,.08);
z-index:1;
}

/*==================================================
LAYOUT
==================================================*/

.st-layout{
display:grid;
grid-template-columns:400px 1fr;
gap:32px;
align-items:start;
}

.st-sidebar{
position:sticky;
top:24px;
}

.st-content{
display:flex;
flex-direction:column;
gap:22px;
}

/*==================================================
CARD
==================================================*/

.st-card{
background:var(--st-card);
border-radius:var(--st-radius);
box-shadow:var(--st-shadow);
padding:30px;
transition:box-shadow var(--st-transition), transform var(--st-transition);
border:1px solid var(--st-border);
}

.st-card:hover{
box-shadow:var(--st-shadow-hover);
}

.st-form-card{
overflow:hidden;
position:relative;
}

.st-form-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:var(--st-amber);
}

.st-result-card-wrapper{
min-height:620px;
}

.st-card-header{
display:flex;
align-items:center;
gap:16px;
margin-bottom:28px;
}

.st-card-header h3{
margin:0 0 6px;
font-family:var(--st-font-display);
font-size:22px;
font-weight:600;
letter-spacing:.2px;
color:var(--st-ink);
text-transform:uppercase;
}

.st-card-header p{
margin:0;
font-size:13.5px;
line-height:1.7;
color:var(--st-text-light);
}

.st-card-icon{
width:56px;
height:56px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
background:linear-gradient(135deg, var(--st-amber), var(--st-amber-dark));
color:#fff;
flex-shrink:0;
box-shadow:0 12px 24px rgba(242,167,27,.30);
}

/*==================================================
FORM FIELDS
==================================================*/

.st-field{
margin-bottom:20px;
position:relative;
}

.st-field label{
display:block;
margin-bottom:8px;
font-size:12.5px;
font-weight:700;
letter-spacing:.4px;
text-transform:uppercase;
color:var(--st-ink);
}

.st-input-group{
position:relative;
}

.st-input-group i{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
color:var(--st-amber-dark);
font-size:15px;
z-index:2;
pointer-events:none;
}

.st-input-group input,
.st-input-group select{
width:100%;
height:50px;
padding-left:46px;
padding-right:16px;
border-radius:var(--st-radius-sm);
border:1.5px solid var(--st-border);
background:#fff;
font-family:var(--st-font-body);
font-size:14.5px;
color:var(--st-text);
outline:none;
transition:border-color var(--st-transition), box-shadow var(--st-transition);
}

.st-input-group input::placeholder{
color:#a9aeba;
}

.st-input-group input:hover,
.st-input-group select:hover{
border-color:var(--st-amber);
}

.st-input-group input:focus,
.st-input-group select:focus{
border-color:var(--st-amber-dark);
box-shadow:0 0 0 4px rgba(242,167,27,.16);
}

.st-input-group select{
appearance:none;
cursor:pointer;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%231A1A1A' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
background-repeat:no-repeat;
background-position:right 16px center;
}

.st-suffix{
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:var(--st-text-light);
font-family:var(--st-font-mono);
font-size:12px;
font-weight:700;
text-transform:uppercase;
}

.st-helper{
display:block;
margin-top:7px;
font-size:11.5px;
color:var(--st-text-light);
}

/*==================================================
RADIO (reserved for future use)
==================================================*/

.st-radio-group{
display:flex;
gap:12px;
}

.st-radio{
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
border:1.5px solid var(--st-border);
border-radius:var(--st-radius-sm);
height:50px;
cursor:pointer;
transition:var(--st-transition);
background:#fff;
}

.st-radio:hover{
border-color:var(--st-amber);
}

.st-radio input{
accent-color:var(--st-amber-dark);
}

.st-radio:has(input:checked){
background:var(--st-amber-light);
border-color:var(--st-amber);
}

/*==================================================
BUTTON
==================================================*/

.st-btn{
width:100%;
height:54px;
border:none;
border-radius:var(--st-radius-sm);
background:var(--st-ink);
color:#fff;
font-family:var(--st-font-display);
font-size:14.5px;
font-weight:600;
letter-spacing:.6px;
text-transform:uppercase;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
transition:var(--st-transition);
box-shadow:0 14px 30px rgba(19,42,70,.25);
}

.st-btn:hover{
transform:translateY(-2px);
background:var(--st-ink-dark);
box-shadow:0 18px 36px rgba(19,42,70,.32);
}

.st-btn:active{
transform:scale(.98);
}

.st-btn:disabled{
opacity:.65;
cursor:not-allowed;
transform:none;
}

.st-btn i{
color:var(--st-amber);
}

/*==================================================
DROPDOWN
==================================================*/

.st-dropdown{
position:absolute;
top:100%;
left:0;
right:0;
background:#fff;
border-radius:var(--st-radius-sm);
margin-top:8px;
border:1px solid var(--st-border);
overflow:hidden;
display:none;
max-height:300px;
overflow-y:auto;
z-index:999;
box-shadow:0 18px 40px rgba(19,42,70,.14);
}

.st-dropdown.active{
display:block;
}

.st-dropdown-item{
padding:13px 16px;
cursor:pointer;
transition:.15s;
border-bottom:1px solid #f4f0e4;
}

.st-dropdown-item:last-child{
border-bottom:none;
}

.st-dropdown-item:hover,
.st-dropdown-item.active{
background:var(--st-amber-light);
}

.st-dropdown-item strong{
display:block;
color:var(--st-ink);
margin-bottom:3px;
font-size:13.5px;
font-weight:600;
}

.st-dropdown-item small{
color:var(--st-text-light);
font-size:12px;
}

.st-dropdown mark{
background:var(--st-amber);
color:var(--st-ink-dark);
padding:0 2px;
border-radius:3px;
}

.st-dropdown-empty{
text-align:center;
cursor:default;
padding:22px 16px;
}

/*==================================================
SUMMARY — "resi stub"
==================================================*/

.st-summary{
position:relative;
background:var(--st-ink);
border-radius:var(--st-radius);
padding:22px 26px;
margin-bottom:8px;
box-shadow:0 16px 34px rgba(11,28,48,.22);
}

.st-summary-title{
display:flex;
align-items:center;
gap:9px;
color:var(--st-amber);
font-family:var(--st-font-mono);
font-size:11.5px;
font-weight:700;
letter-spacing:1.2px;
text-transform:uppercase;
margin-bottom:16px;
}

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

.st-summary-item{
border-left:2px solid rgba(242,167,27,.4);
padding-left:12px;
}

.st-summary-item small{
display:block;
color:rgba(255,255,255,.5);
margin-bottom:5px;
font-size:11px;
text-transform:uppercase;
letter-spacing:.4px;
}

.st-summary-item strong{
color:#fff;
font-size:14.5px;
font-weight:700;
font-family:var(--st-font-mono);
}

/*==================================================
RESULT
==================================================*/

.st-result{
display:flex;
flex-direction:column;
gap:16px;
}

.st-result-card{
position:relative;
background:#fff;
border-radius:var(--st-radius-sm);
padding:22px 24px;
border:1.5px solid var(--st-border);
box-shadow:0 10px 26px rgba(19,42,70,.05);
transition:var(--st-transition);
overflow:hidden;
animation:fadeUp .4s ease both;
}

.st-result-card:hover{
transform:translateY(-3px);
box-shadow:0 20px 40px rgba(19,42,70,.10);
}

.st-result-card::before{
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
width:5px;
background:var(--st-border);
}

.st-result-card.cheapest::before{ background:var(--st-amber); }
.st-result-card.fastest::before{ background:var(--st-ink); }
.st-result-card.recommended::before{ background:var(--st-amber-dark); }

.st-result-card.cheapest{ border-color:rgba(245,166,35,.4); }
.st-result-card.fastest{ border-color:rgba(0,0,0,.25); }
.st-result-card.recommended{ border-color:rgba(224,123,0,.35); }

/*==================================================
STAMP BADGE
==================================================*/

.st-badge-premium{
position:absolute;
top:18px;
right:18px;
z-index:5;
min-width:130px;
justify-content:center;
}

.st-badge-cheapest{
color:var(--st-ink);
background:var(--st-amber);
}

.st-badge-fastest{
color:#fff;
background:var(--st-ink);
}

.st-result-card.recommended .st-badge-premium{
color:var(--st-amber-dark);
background:var(--st-amber-light);
}

/*==================================================
BODY
==================================================*/

.st-result-body{
display:flex;
flex-direction:column;
gap:16px;
}

.st-result-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:18px;
padding-right:170px;
}

.st-courier-head{
display:flex;
align-items:center;
gap:13px;
}

.st-courier-logo{
width:44px;
height:44px;
object-fit:contain;
flex-shrink:0;
border-radius:10px;
background:#f7f4ea;
padding:6px;
border:1px solid var(--st-border);
}

/* fallback badge shown when the logo <img> fails to load */
.st-courier-fallback{
display:none;
width:44px;
height:44px;
border-radius:10px;
flex-shrink:0;
align-items:center;
justify-content:center;
font-family:var(--st-font-display);
font-size:15px;
font-weight:600;
color:#fff;
background:linear-gradient(135deg, var(--st-ink), var(--st-ink-dark));
letter-spacing:.5px;
}

.st-courier-name{
display:block;
font-family:var(--st-font-mono);
font-size:11px;
color:var(--st-text-light);
margin-bottom:4px;
text-transform:uppercase;
letter-spacing:.6px;
}

.st-result-title h3{
margin:0;
font-family:var(--st-font-display);
font-size:19px;
font-weight:600;
color:var(--st-ink);
text-transform:uppercase;
}

.st-result-title p{
margin:7px 0 0;
color:var(--st-text-light);
font-size:13px;
line-height:1.6;
}

/*==================================================
PRICE
==================================================*/

.st-price{
text-align:right;
flex-shrink:0;
min-width:140px;
}

.st-price strong{
display:block;
font-family:var(--st-font-mono);
font-size:23px;
font-weight:700;
margin-top:50px;
color:var(--st-ink);
}

.st-price small{
color:var(--st-text-light);
font-size:11px;
text-transform:uppercase;
letter-spacing:.4px;
}

/*==================================================
FOOTER
==================================================*/

.st-result-footer{
display:flex;
justify-content:space-between;
align-items:center;
border-top:1px solid var(--st-border);
padding-top:16px;
}

.st-estimation{
display:flex;
align-items:center;
gap:9px;
color:var(--st-text-light);
font-size:13px;
font-family:var(--st-font-mono);
}

.st-estimation i{
color:var(--st-amber-dark);
}

/*==================================================
LOADING
==================================================*/

.st-loading{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:80px 20px;
gap:16px;
text-align:center;
}

.st-loading h4{
margin:0;
font-family:var(--st-font-display);
font-size:16px;
color:var(--st-ink);
text-transform:uppercase;
letter-spacing:.4px;
}

.st-loading p{
margin:0;
color:var(--st-text-light);
font-size:13.5px;
max-width:320px;
}

.st-spinner{
width:52px;
height:52px;
border-radius:50%;
border:4px solid var(--st-amber-light);
border-top-color:var(--st-amber);
animation:st-spin .8s linear infinite;
}

/*==================================================
EMPTY
==================================================*/

.st-empty{
text-align:center;
padding:70px 30px;
}

.st-empty-icon{
width:76px;
height:76px;
margin:0 auto 20px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:var(--st-amber-light);
font-size:30px;
color:var(--st-amber-dark);
}

.st-empty h3{
margin:0 0 10px;
font-family:var(--st-font-display);
color:var(--st-ink);
font-size:20px;
text-transform:uppercase;
}

.st-empty p{
margin:0 auto;
max-width:360px;
color:var(--st-text-light);
line-height:1.8;
font-size:14px;
}

.st-empty strong{
color:var(--st-ink);
}

/*==================================================
TOAST
==================================================*/

.st-toast{
position:fixed;
right:26px;
bottom:26px;
min-width:270px;
max-width:380px;
padding:15px 20px;
border-radius:var(--st-radius-sm);
color:#fff;
font-weight:600;
font-size:13.5px;
box-shadow:0 20px 42px rgba(0,0,0,.20);
transform:translateY(24px);
opacity:0;
transition:.3s;
z-index:999999;
}

.st-toast.show{
transform:translateY(0);
opacity:1;
}

.st-toast-success{ background:var(--st-success); }
.st-toast-error{ background:var(--st-danger); }
.st-toast-warning{ background:var(--st-amber-dark); }
.st-toast-info{ background:var(--st-ink); }

/*==================================================
HELPER
==================================================*/

.st-hidden{
display:none!important;
}

/*==================================================
SCROLLBAR
==================================================*/

.st-dropdown::-webkit-scrollbar,
.st-result::-webkit-scrollbar{
width:7px;
}

.st-dropdown::-webkit-scrollbar-thumb,
.st-result::-webkit-scrollbar-thumb{
background:var(--st-amber);
border-radius:20px;
}

.st-dropdown::-webkit-scrollbar-track,
.st-result::-webkit-scrollbar-track{
background:#f0f0f0;
}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1024px){

.st-layout{ grid-template-columns:1fr; }
.st-sidebar{ position:relative; top:0; }
.st-hero{ padding:44px 36px; }
.st-hero h1{ font-size:36px !important; }

}

@media(max-width:768px){

.st-app{ padding:20px 14px 60px; }
.st-card{ padding:24px; border-radius:16px; }
.st-hero{ padding:34px 26px; border-radius:18px; }
.st-hero h1{ font-size:29px !important; }
.st-hero p{ font-size:14.5px; }
.st-card-header h3{ font-size:19px; }
.st-result-top{ flex-direction:column; }
.st-price{ text-align:left; }
.st-price strong{ font-size:22px; }
.st-result-footer{ flex-direction:column; align-items:flex-start; gap:14px; }
.st-summary-grid{ grid-template-columns:repeat(2,1fr); }
.st-toast{ left:14px; right:14px; min-width:auto; max-width:none; bottom:14px; }

}

@media(max-width:480px){

.st-input-group input,
.st-input-group select{ height:48px; }
.st-btn{ height:50px; font-size:13.5px; }
.st-result-card{ padding:18px; }
.st-result-title h3{ font-size:16.5px; }
.st-price strong{ font-size:20px; }
.st-summary-grid{ grid-template-columns:1fr 1fr; }

}

/*==================================================
ANIMATION
==================================================*/

@keyframes fadeUp{
from{ opacity:0; transform:translateY(16px); }
to{ opacity:1; transform:translateY(0); }
}

@keyframes st-spin{
to{ transform:rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
*{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}