/* Construction Corner — Keranjang Layanan */
:root{
  --cc-cart-green:#143a2c;
  --cc-cart-green-2:#0e4b38;
  --cc-cart-orange:#ff573d;
  --cc-cart-cream:#f8f5ec;
  --cc-cart-line:#dce6e0;
  --cc-cart-text:#263a31;
  --cc-cart-muted:#69776f;
  --cc-cart-shadow:0 18px 60px rgba(20,58,44,.18);
}
.cc-cart-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--cc-cart-green);
  border-radius:10px;
  background:#fff;
  color:var(--cc-cart-green);
  font:800 12px/1.2 inherit;
  cursor:pointer;
  white-space:nowrap;
  transition:.18s ease;
}
.cc-cart-add:hover{
  background:var(--cc-cart-green);
  color:#fff;
  transform:translateY(-1px);
}
.cc-cart-add.is-added{
  background:#eaf3ee;
  border-color:#bfd3c8;
  color:var(--cc-cart-green);
}
.cc-cart-add svg{width:15px;height:15px}

.cc-cart-fab{
  position:fixed;
  right:22px;
  bottom:92px;
  z-index:997;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 15px;
  border:0;
  border-radius:999px;
  background:var(--cc-cart-green);
  color:#fff;
  box-shadow:var(--cc-cart-shadow);
  font:800 13px/1 inherit;
  cursor:pointer;
  transition:.18s ease;
}
.cc-cart-fab:hover{transform:translateY(-2px)}
.cc-cart-fab[hidden]{display:none!important}
.cc-cart-fab svg{width:19px;height:19px}
.cc-cart-count{
  min-width:23px;
  height:23px;
  display:inline-grid;
  place-items:center;
  padding:0 6px;
  border-radius:999px;
  background:var(--cc-cart-orange);
  color:#fff;
  font-size:11px;
  line-height:1;
}

.cc-cart-overlay{
  position:fixed;
  inset:0;
  z-index:998;
  background:rgba(5,25,18,.42);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.cc-cart-drawer{
  position:fixed;
  top:0;
  right:0;
  z-index:999;
  width:min(440px,100%);
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:#fff;
  transform:translateX(102%);
  transition:transform .24s ease;
  box-shadow:-20px 0 70px rgba(20,58,44,.18);
}
.cc-cart-open .cc-cart-overlay{
  opacity:1;
  pointer-events:auto;
}
.cc-cart-open .cc-cart-drawer{transform:translateX(0)}
body.cc-cart-lock{overflow:hidden}

.cc-cart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 20px 16px;
  border-bottom:1px solid var(--cc-cart-line);
}
.cc-cart-head h2{
  margin:0;
  color:var(--cc-cart-green);
  font-size:20px;
  line-height:1.2;
}
.cc-cart-close{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid var(--cc-cart-line);
  border-radius:10px;
  background:#fff;
  color:var(--cc-cart-green);
  cursor:pointer;
  font-size:22px;
}
.cc-cart-body{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:18px 20px;
}
.cc-cart-empty{
  padding:52px 12px;
  text-align:center;
  color:var(--cc-cart-muted);
}
.cc-cart-empty strong{
  display:block;
  margin-bottom:6px;
  color:var(--cc-cart-green);
  font-size:17px;
}
.cc-cart-list{display:grid;gap:12px}
.cc-cart-item{
  padding:14px;
  border:1px solid var(--cc-cart-line);
  border-radius:14px;
  background:#fff;
}
.cc-cart-item-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.cc-cart-item-name{
  color:var(--cc-cart-green);
  font-size:14px;
  font-weight:800;
  line-height:1.35;
}
.cc-cart-item-variant{
  margin-top:4px;
  color:var(--cc-cart-muted);
  font-size:12px;
  line-height:1.45;
}
.cc-cart-remove{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:#8d9892;
  cursor:pointer;
  font-size:19px;
  line-height:1;
}
.cc-cart-item-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:13px;
}
.cc-cart-qty{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--cc-cart-line);
  border-radius:9px;
  overflow:hidden;
}
.cc-cart-qty button{
  width:31px;height:31px;
  border:0;
  background:#f7f9f7;
  color:var(--cc-cart-green);
  font-weight:900;
  cursor:pointer;
}
.cc-cart-qty span{
  min-width:34px;
  text-align:center;
  color:var(--cc-cart-green);
  font-size:12px;
  font-weight:800;
}
.cc-cart-item-price{
  text-align:right;
  color:var(--cc-cart-green);
  font-size:13px;
  font-weight:800;
}
.cc-cart-item-price small{
  display:block;
  color:var(--cc-cart-muted);
  font-size:10px;
  font-weight:600;
}

.cc-cart-lead{
  display:grid;
  gap:9px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--cc-cart-line);
}
.cc-cart-lead-title{
  margin-bottom:2px;
  color:var(--cc-cart-green);
  font-size:13px;
  font-weight:800;
}
.cc-cart-field input,
.cc-cart-field textarea{
  width:100%;
  border:1px solid var(--cc-cart-line);
  border-radius:10px;
  background:#fff;
  color:var(--cc-cart-text);
  font:inherit;
  outline:0;
}
.cc-cart-field input{height:43px;padding:0 12px}
.cc-cart-field textarea{
  min-height:76px;
  padding:11px 12px;
  resize:vertical;
}
.cc-cart-field input:focus,
.cc-cart-field textarea:focus{
  border-color:#9cb9aa;
  box-shadow:0 0 0 3px rgba(20,58,44,.06);
}

.cc-cart-foot{
  padding:16px 20px 20px;
  border-top:1px solid var(--cc-cart-line);
  background:#fff;
}
.cc-cart-total-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:13px;
}
.cc-cart-total-label{
  color:var(--cc-cart-muted);
  font-size:12px;
}
.cc-cart-total-label strong{
  display:block;
  margin-top:2px;
  color:var(--cc-cart-green);
  font-size:14px;
}
.cc-cart-total{
  color:var(--cc-cart-green);
  font-size:21px;
  font-weight:900;
}
.cc-cart-checkout{
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:12px;
  background:#22a65a;
  color:#fff;
  font:800 14px/1.2 inherit;
  cursor:pointer;
}
.cc-cart-checkout:disabled{opacity:.45;cursor:not-allowed}
.cc-cart-checkout svg{width:18px;height:18px}
.cc-cart-disclaimer{
  margin:9px 0 0;
  color:var(--cc-cart-muted);
  font-size:10.5px;
  line-height:1.45;
  text-align:center;
}

.cc-cart-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:1001;
  max-width:calc(100% - 32px);
  transform:translate(-50%,20px);
  padding:10px 14px;
  border-radius:10px;
  background:#102d23;
  color:#fff;
  opacity:0;
  pointer-events:none;
  font-size:12px;
  font-weight:700;
  transition:.2s ease;
}
.cc-cart-toast.is-visible{
  opacity:1;
  transform:translate(-50%,0);
}

@media(max-width:700px){
  .cc-cart-fab{
    left:14px;
    right:72px;
    bottom:14px;
    justify-content:center;
    border-radius:13px;
  }
  .cc-cart-drawer{width:100%}
  .cc-cart-head{padding-top:max(18px,env(safe-area-inset-top))}
  .cc-cart-foot{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}